Difference between revisions of "Team:TAS Taipei/Software"

(Prototype team page)
 
(5 intermediate revisions by 2 users not shown)
Line 1: Line 1:
−
{{TAS_Taipei}}
+
{{TAS Taipei/CSS}}
 
<html>
 
<html>
  
 +
<head>
 +
<title>Software - TAS Taipei iGEM Wiki</title>
 +
<style type='text/css'>
 +
      #top_title, #sideMenu{
 +
        display: none;
 +
      }
  
−
<div class="column full_size judges-will-not-evaluate">
+
      #content{
−
<h3>★  ALERT! </h3>
+
        width: 100%;
−
<p>This page is used by the judges to evaluate your team for the<a href="https://2016.igem.org/Judging/Awards"> Best Software Tool award</a>. </p>
+
        margin: 0;
 +
        padding: 0;
 +
        background: #f3f4f4;}
  
 +
     
  
−
<p> Delete this box in order to be evaluated for this medal. See more information at <a href="https://2016.igem.org/Judging/Pages_for_Awards/Instructions"> Instructions for Pages for awards</a>.</p>
+
 
 +
    </style>
 +
</head>
 +
 
 +
<body data-spy="scroll" data-target="#category_navbar">
 +
<link rel="shortcut icon" href="https://static.igem.org/mediawiki/2016/c/c6/T--TAS_Taipei--TAS_iGEM_Logo.png">
 +
<link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
 +
 
 +
<link rel="stylesheet" href="https://2015.igem.org/Template:TAS_Taipei/css/bootstrap?action=raw&ctype=text/css">
 +
 
 +
 
 +
 
 +
<script>localStorage.clear();</script>
 +
<script src="https://2015.igem.org/Template:TAS_Taipei/js/jquery?action=raw&ctype=text/javascript"></script>
 +
<script src='https://2015.igem.org/Template:TAS_Taipei/js/bootstrap?action=raw&ctype=text/javascript'></script>
 +
<script src="https://2015.igem.org/Template:TAS_Taipei/js/jquerySlides?action=raw&ctype=text/javascript"></script>
 +
 
 +
<script type="text/javascript" async
 +
  src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML">
 +
</script>
 +
 
 +
<script type="text/x-mathjax-config">
 +
MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
 +
</script>
 +
 
 +
<style type='text/css'>
 +
p{font-family: Lato !important; font-size:17px !important}
 +
h1{font-size:40-px !important;}
 +
body{font-family:Lato !important;}
 +
h3{font-size:25-px
 +
</style>
 +
 
 +
<script>
 +
$(document).ready(function() {
 +
if(document.domain === "2016.igem.org")
 +
setTimeout(function() {
 +
$("style:eq(0)").remove();
 +
}, 500);
 +
});
 +
   
 +
   
 +
</script>
 +
   
 +
 
 +
   
 +
<div class="container" style='z-index:10;position:relative;'>
 +
<div class="row center-block" style = "text-align: left;">
 +
<nav style='font-family:Lato;font-size:22px;background-color:#1C77C3;-webkit-transform: translateZ(0);z-index: 100;position: fixed;box-shadow: 0px 0px 10px black;'>
 +
<ul style='margin-left:0px'>
 +
<li class="dropdown">
 +
<a href="https://2016.igem.org/Team:TAS_Taipei/Background"><h4 class="dropdown-toggle disabled" data-toggle="dropdown"><b>PROJECT</b></h4></a>
 +
<div class="dropdown-menu">
 +
<div class='subcategories_container'>
 +
<div>
 +
<h5><a href="https://2016.igem.org/Team:TAS_Taipei/Background">Background</a></h5>
 +
</div>
 +
<div>
 +
<h5><a href="https://2016.igem.org/Team:TAS_Taipei/Achievements">Achievements</a></h5>
 +
</div>
 +
<div>
 +
<h5><a href="https://2016.igem.org/Team:TAS_Taipei/Collaborations">Collaborations</a></h5>
 +
</div>
 +
<div>
 +
<h5><a href="https://2016.igem.org/Team:TAS_Taipei/Parts">Parts</a></h5>
 +
</div>
 +
</div>
 +
<div style='height:140px;'>
 +
<img src="https://static.igem.org/mediawiki/2016/1/11/T--TAS_Taipei--TAS_Icon_Project.png">
 +
<h4><b>Cataracts</b> - the leading cause of blindness. Find out how we can non-invasively <b>treat</b> and <b>prevent</b> cataract formation.</b></h4>
 +
</div>
 +
 +
</div>
 +
</li>
 +
<li class="dropdown">
 +
<a href="https://2016.igem.org/Team:TAS_Taipei/Experimental_Summary"><h4 class='dropdown-toggle disabled' data-toggle="dropdown"><b>EXPERIMENTAL</b></h4></a>
 +
<div class="dropdown-menu">
 +
<div class='subcategories_container'>
 +
<div>
 +
<h5><a href="https://2016.igem.org/Team:TAS_Taipei/Experimental_Summary#lensmodel">Lens Cataract Model</a></h5>
 +
</div>
 +
<div>
 +
<h5><a href="https://2016.igem.org/Team:TAS_Taipei/Experimental_Summary#construct">Prevention and Treatment Constructs </a></h5>
 +
</div>
 +
<div>
 +
<h5><a href="https://2016.igem.org/Team:TAS_Taipei/Experimental_Summary#prototype">Delivery Prototype</a></h5>
 +
</div>
 +
<div>
 +
<h5><a href="https://2016.igem.org/Team:TAS_Taipei/Notebook">Notebook</a></h5>
 +
</div>
 +
</div>
 +
<div style='height:140px;'>
 +
<img src="https://static.igem.org/mediawiki/2016/b/b0/T--TAS_Taipei--TAS_Icon_Experiments.png">
 +
                        <h4>We build <b>constructs</b> to make our great ideas become reality. Follow along our discovery of exciting science!</h4>
 +
</div>
 +
</div>
 +
</li>
 +
<li class="dropdown">
 +
<a href="https://2016.igem.org/Team:TAS_Taipei/Model"><h4 class='dropdown-toggle disabled' data-toggle="dropdown"><b>MODEL</b></h4></a>
 +
<div class="dropdown-menu">
 +
<div class='subcategories_container'>
 +
<div>
 +
<h5><a href="https://2016.igem.org/Team:TAS_Taipei/Model#GSRFunc">GSR Function</a></h5>
 +
</div>
 +
<div>
 +
<h5><a href="https://2016.igem.org/Team:TAS_Taipei/Model#prototype">Prototype Delivery</a></h5>
 +
</div>
 +
<div>
 +
<h5><a href="https://2016.igem.org/Team:TAS_Taipei/Model#treatment">CH25H Treatment</a></h5>
 +
</div>
 +
<div>
 +
<h5><a href="https://2016.igem.org/Team:TAS_Taipei/Model#software">Calculator</a></h5>
 +
</div>
 +
 
 +
</div>
 +
<div style='height:140px;'>
 +
<img src="https://static.igem.org/mediawiki/2016/c/ca/T--TAS_Taipei--TAS_Icon_Model.png">
 +
<h4><b>Computational Biology</b> provides us models that we cannot easily test experimentally. Click to find out the results of our modeling, and the math behind it!</h4>
 +
</div>
 +
</div>
 +
</li>
 +
<li class="dropdown">
 +
<a href="https://2016.igem.org/Team:TAS_Taipei/Human_Practices"><h4 class='dropdown-toggle disabled' data-toggle="dropdown"><b>HUMAN PRACTICE</b></h4></a>
 +
<div class="dropdown-menu">
 +
<div class='subcategories_container'>
 +
<div>
 +
<h5><a href="https://2016.igem.org/Team:TAS_Taipei/Human_Practices#research">Research</a></h5>
 +
</div>
 +
<div>
 +
<h5><a href="https://2016.igem.org/Team:TAS_Taipei/Human_Practices#outreach">Outreach</a></h5>
 +
</div>
 +
<div>
 +
<h5><a href="https://2016.igem.org/Team:TAS_Taipei/Human_Practices#impact">Impact</a></h5>
 +
</div>
 +
</div>
 +
<div style='height:140px;'>
 +
<img src="https://static.igem.org/mediawiki/2016/b/b9/T--TAS_Taipei--TAS_Icon_HP.png">
 +
<h4>We don't just grow cool bacteria. We make a <b>difference</b>. Find out how we tackled <b>social aspects</b> of this project.</h4>
 +
</div>
 +
</div>
 +
</li>
 +
<li class="dropdown">
 +
<a href="https://2016.igem.org/Team:TAS_Taipei/Safety"><h4 class='dropdown-toggle disabled' data-toggle="dropdown"><b>SAFETY</b></h4></a>
 +
<div class="dropdown-menu">
 +
<div style='height:100px;'>
 +
<div class='subcategories_container'>
 +
<div>
 +
<h5><a href="https://2016.igem.org/Team:TAS_Taipei/Safety#overview">Overview</a></h5>
 +
</div>
 +
<div>
 +
<h5><a href="https://2016.igem.org/Team:TAS_Taipei/Safety#biosafety">Biosafety</a></h5>
 +
</div>
 +
<div>
 +
<h5><a href="https://2016.igem.org/Team:TAS_Taipei/Safety#riskreduction">Risk Reduction Methods</a></h5>
 +
</div>
 +
<div>
 +
<h5><a href="https://2016.igem.org/Team:TAS_Taipei/Safety#furtherquestion">Further Questions</a></h5>
 +
</div>
 +
</div>
 +
<img src="https://static.igem.org/mediawiki/2016/7/7e/T--TAS_Taipei--TAS_Icon_Safety.png">
 +
<h4><b>Safety first.</b> Especially in a lab. Here's how we maintained and investigated the integrity and security of our work environment.</h4>
 +
</div>
 +
</div>
 +
</li>
 +
<li class="dropdown">
 +
<a href="https://2016.igem.org/Team:TAS_Taipei/Team"><h4 class='dropdown-toggle disabled' data-toggle="dropdown"><b>TEAM</b></h4></a>
 +
<div class="dropdown-menu">
 +
<div class='subcategories_container'>
 +
<div>
 +
<h5><a href="https://2016.igem.org/Team:TAS_Taipei/Team#members">Members</a></h5>
 +
</div>
 +
<div>
 +
<h5><a href="https://2016.igem.org/Team:TAS_Taipei/Team#about">About</a></h5>
 +
</div>
 +
<div>
 +
<h5><a href="https://2016.igem.org/Team:TAS_Taipei/Attributions">Attributions</a></h5>
 +
</div>
 +
<div>
 +
<h5><a href="https://2016.igem.org/Team:TAS_Taipei/Wiki_Standard_Pages">Wiki Standard Pages</a></h5>
 +
</div>
 +
</div>
 +
<div style='height:140px;'>
 +
<img src="https://static.igem.org/mediawiki/2016/c/c6/T--TAS_Taipei--TAS_Icon_Team.png">
 +
<h4>Every iGEM project is the accumulation of an entire year's hard work by a group of cheerful students. <b>Meet the team!</b></h4>
 +
</div>
 +
</div>
 +
</li>
 +
</ul>
 +
</nav>
 +
</div>
 +
<br>
 +
<br>
 +
<br>
 +
<div class="row center-block" style = "padding:10px;width:90%;background-color:#07BEB8;box-shadow:0px 0px 5px black">
 +
<div class="row" style = "text-align:center;">
 +
<div class="col-sm-2">
 +
<a href="https://2016.igem.org/Team:TAS_Taipei" style='text-decoration: none'><img src="https://static.igem.org/mediawiki/2016/c/c6/T--TAS_Taipei--TAS_iGEM_Logo.png
 +
" alt="" style="width: 100px;"></a>
 +
</div>
 +
<div class="col-sm-8" style='text-align:center;'>
 +
<a href="https://2016.igem.org/Team:TAS_Taipei" style='text-decoration: none;'>
 +
<h2 style="font-family:'Lato';letter-spacing:10px;color: white; font-size: 60px;  margin-top: 0;  margin-bottom: 0;"><b>
 +
C&#9678;UNTERACTS</b></h2>
 +
</a>
 +
</div>
 +
<div class="col-sm-2">
 +
<a href="https://igem.org/HS"><img src="https://static.igem.org/mediawiki/2016/6/6e/T--TAS_Taipei--TAS_Icon_Logo2.png" alt="" style="width: 100px;"></a>
 +
</div>
 +
</div>
 
</div>
 
</div>
 +
<br>
 +
<div class="row card" id='bodycontainer' class='row'>
 +
<div class="col-sm-2" style='padding-left:5% padding-right:10%'>
 +
 +
</div>
  
  
 +
<div class="col-sm-10" style="padding-right:5%">
 +
<h1>Software</h1>
 +
                    <div class = "row">
 +
              <div class="col-sm-12">
 +
                          <div class="row">
 +
                                <div class="col-sm-12">
 +
                                    <h2 id="software">Generalized Nanoparticle Customizer</h2>
 +
                                    <p>We built a nanoparticle customizer, which allows you to track the concentration and rates of drug delivery to any part of the body using nanoparticles. You can customize your own design of nanoparticles, and analyze its function inside the body. </p>
 +
                                   
 +
                                    <p>These software tools are based off our model results. The specific equations used in this calculator can be found, in the collapsible details in the Model page.</p>
 +
                                   
 +
                                    <p>This computational software can be used by future iGEM teams who are interested in using nanoparticles to efficiently deliver their synthesized proteins. The calculational tool is programmed on a Google Spreadsheet. Click the button below to visit the spreadsheet. Please make a copy of the spreadsheet to freely use it.</p>
 +
                                   
 +
                                    <a href="https://docs.google.com/spreadsheets/d/1kOSX_8kB_JrRxCTKfz8-xIw6D3ocg9k6pY2wdRickec/edit?usp=sharing"><button type="button" class="btn btn-primary btn-lg">Click to visit our Nanoparticle Customizer!</button></a>
 +
                                   
 +
                                   
 +
                                </div>
 +
                            </div>
 +
                          <h2 id="software">Cataract - Specific Calculator Tool</h2>
 +
                          <p>We also built two calculators, one for prevention, one for treatment, that is specific to our project.</p>
 +
                           
  
 +
                            <div style = "border-style:solid; text-align:center; padding:20px" class="col-sm-12">
 +
                                    <div class="row">
 +
                                    <h2 style = "padding:0">CALCULATOR</h2>
  
 +
                                        <div class="col-sm-6">
 +
                                        <h3 style="padding:0">Prevention</h3>
 +
                                        <script>
 +
                                            function round(value, decimals) {
 +
                                                return Number(Math.round(value+'e'+decimals)+'e-'+decimals);
 +
                                            }
 +
                                            calculateee = function(){
 +
                                                var XInputLOCSP = document.getElementById("inputLOCS").value;
 +
                                                var XCrystDamP = -0.04559+0.3627*(XInputLOCSP)-0.06248*Math.pow(XInputLOCSP,2)+0.03313*Math.pow(XInputLOCSP,3);
 +
                                                var XGSRP = 171.9*Math.exp(-5.497*XCrystDamP)+41.23*Math.exp(-0.955*XCrystDamP)+27.01;
 +
                                                var XNPConcP = (XGSRP/10-1)/((0.04555-7.9*Math.pow(10,-6)*200));
 +
                                                var XEyedropP = XNPConcP/14.04;
 +
                                                var XResultP = XEyedropP*50/100;
  
 +
                                                XInputLOCSPid.innerHTML = round(XInputLOCSP,1);
 +
                                                XCrysDamPid.innerHTML = round(XCrystDamP,4);
 +
                                                XGSRPid.innerHTML = round(XGSRP,2);
 +
                                                XNPConcPid.innerHTML = round(XNPConcP,2);
 +
                                                XEyedropPid.innerHTML = round(XEyedropP,2);
 +
                                                XResultPid.innerHTML = round(XResultP,2);
  
−
<div class="column full_size">
 
−
<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.</p>
 
  
 +
                                            }
 +
                                        </script>
  
−
<h5> Inspiration </h5>
 
−
<p>
 
−
Here are a few examples from previous teams:
 
−
</p>
 
−
<ul>
 
−
<li><a href="https://2013.igem.org/Team:TU-Munich/Results/Software">TU Munich 2013</a></li>
 
−
<li><a href="https://2014.igem.org/Team:Heidelberg/Software">Heidelberg 2014</a></li>
 
−
<li><a href="https://2014.igem.org/Team:Aachen/Project/Measurement_Device#Software">Aachen 2014</a></li>
 
−
</ul>
 
  
 +
                                        <span style="width:70%">LOCS Score Threshold:  </span><input id = "inputLOCS" type="text" style="width:30%">
 +
 +
                                        <br><span style="font-size:13px">We guarentee that by applying this prevention eyedrop daily, your LOCS score will remain below your threshold for 50 years.</span>
 +
                                        <br><button onclick = "calculateee()">Calculate!</button><br>
 +
                                        <br>
 +
                                        <span>Prevention Results </span>
 +
 +
                                        <table class="table table-hover fixed" style="font:16px"> 
 +
                                            <col width="150px" />
 +
                                            <col width="150px" />
 +
                                            <col width="100px" />
 +
                                            <thead>
 +
                                                <tr>
 +
                                                    <th>Variable</th>
 +
                                                    <th>Value</th>
 +
                                                    <th>Source</th>
 +
                                                </tr>
 +
                                            </thead>
 +
                                            <tbody align="right">
 +
                                                <tr>
 +
                                                    <td>Allowable LOCS</td>
 +
                                                    <td> <span id="XInputLOCSPid">&nbsp;&nbsp;&nbsp;</span></td>
 +
 +
                                                    <td></td>
 +
                                                </tr>
 +
                                                <tr>
 +
                                                    <td>Crystallin Damage</td>
 +
                                                    <td> <span id="XCrysDamPid">&nbsp;&nbsp;&nbsp; </span>&nbsp; c.d.</td>
 +
 +
                                                    <td>Model 1</td>
 +
                                                </tr>
 +
                                                <tr>
 +
                                                    <td>GSR Maintained</td>
 +
                                                    <td> <span id="XGSRPid">&nbsp;&nbsp;&nbsp;</span>&nbsp; uM</td>
 +
 +
                                                    <td>Model 2</td>
 +
                                                </tr>
 +
                                                <tr>
 +
                                                    <td>Nanoparticle Conc.</td>
 +
                                                    <td> <span id="XNPConcPid">&nbsp;&nbsp;&nbsp;</span>&nbsp; uM</td>
 +
 +
                                                    <td>Model 3</td>
 +
                                                </tr>
 +
                                                <tr>
 +
                                                    <td>Eyedrop Conc.</td>
 +
                                                    <td> <span id="XEyedropPid">&nbsp;&nbsp;&nbsp;</span>&nbsp; mM</td>
 +
 +
                                                    <td>Model 4</td>
 +
                                                </tr>
 +
                                                <tr>
 +
                                                    <td>Eyedrop Result</td>
 +
                                                    <td> <span id="XResultPid">&nbsp;&nbsp;&nbsp;</span>&nbsp; mg/mL</td>
 +
 +
                                                    <td></td>
 +
                                                </tr>
 +
                                            </tbody>
 +
                                        </table>
 +
 +
                                    </div>
 +
                                        <div class="col-sm-6">
 +
                                        <h3 style="padding:0">Treatment</h3>
 +
                                        <script>
 +
                                            function round(value, decimals) {
 +
                                                return Number(Math.round(value+'e'+decimals)+'e-'+decimals);
 +
                                            }
 +
                                            calculateeeT = function(){
 +
                                                var XInputLOCST = document.getElementById("inputLOCSTget").value;
 +
                                                var XCrysDamT = -0.04559+0.3627*(XInputLOCST)-0.06248*Math.pow(XInputLOCST,2)+0.03313*Math.pow(XInputLOCST,3);
 +
                                                var XAbsorbanceT = XCrysDamT/9.276;
 +
                                                var XCH25HT = XAbsorbanceT/0.228;
 +
 +
                                                var XEyedropT = XCH25HT/14.04/0.001;
 +
                                                var XResultT = XEyedropT*50/1000;
 +
                                                var XNumofEyedropT = Math.ceil(XResultT/0.75);
 +
 +
                                                XInputLOCSTid.innerHTML = round(XInputLOCST,1);
 +
                                                XCrysDamTid.innerHTML = round(XCrysDamT,4);
 +
                                                XAbsorbanceTid.innerHTML = round(XAbsorbanceT,3)
 +
                                                XCH25HTid.innerHTML = round(XCH25HT,2);
 +
 +
                                                XEyedropTid.innerHTML = round(XEyedropT,2);
 +
                                                XResultTid.innerHTML = round(XResultT,2);
 +
                                                XNumofEyeDropTid.innerHTML = XNumofEyedropT;
 +
 +
 +
                                            }
 +
                                        </script>
 +
 +
 +
                                        <span style="width:70%">Your current LOCS Score:  </span><input id = "inputLOCSTget" type="text" style="width:30%">
 +
 +
                                        <br><span style="font-size:13px">By applying the following treatment, leaving an hour before each dose of eyedrops, we guarentee that it will lower your LOCS score to essentially 0.</span>
 +
                                        <br><button onclick = "calculateeeT()">Calculate!</button><br>
 +
                                        <br>
 +
                                        <span>Treatment Results </span>
 +
 +
                                        <table class="table table-hover fixed" style="font:16px"> 
 +
                                            <col width="150px" />
 +
                                            <col width="150px" />
 +
                                            <col width="100px" />
 +
                                            <thead>
 +
                                                <tr>
 +
                                                    <th>Variable</th>
 +
                                                    <th>Value</th>
 +
                                                    <th>Source</th>
 +
                                                </tr>
 +
                                            </thead>
 +
                                            <tbody align="right">
 +
                                                <tr>
 +
                                                    <td>Allowable LOCS</td>
 +
                                                    <td> <span id="XInputLOCSTid">&nbsp;&nbsp;&nbsp;</span></td>
 +
 +
                                                    <td></td>
 +
                                                </tr>
 +
                                                <tr>
 +
                                                    <td>Crystallin Damage</td>
 +
                                                    <td> <span id="XCrysDamTid">&nbsp;&nbsp;&nbsp; </span>&nbsp; c.d.</td>
 +
 +
                                                    <td>Model 2</td>
 +
                                                </tr>
 +
                                                <tr>
 +
                                                    <td>Absorbance</td>
 +
                                                    <td> <span id="XAbsorbanceTid">&nbsp;&nbsp;&nbsp;</span>&nbsp; a.u.</td>
 +
 +
                                                    <td>Model 1</td>
 +
                                                </tr>
 +
                                                <tr>
 +
                                                    <td>CH25H</td>
 +
                                                    <td> <span id="XCH25HTid">&nbsp;&nbsp;&nbsp;</span>&nbsp; uM</td>
 +
 +
                                                    <td>Model 5</td>
 +
                                                </tr>
 +
                                                <tr>
 +
                                                    <td>Eyedrop Conc.</td>
 +
                                                    <td> <span id="XEyedropTid">&nbsp;&nbsp;&nbsp;</span>&nbsp; uM</td>
 +
 +
                                                    <td>Model 4</td>
 +
                                                </tr>
 +
                                                <tr>
 +
                                                    <td>Eyedrop Result</td>
 +
                                                    <td> <span id="XResultTid">&nbsp;&nbsp;&nbsp;</span>&nbsp; mg/mL</td>
 +
                                                       
 +
                                                    <td>Model 4</td>
 +
                                                </tr>
 +
                                                <tr>
 +
                                                    <td># of Eyedrops</td>
 +
                                                    <td> <span id="XNumofEyeDropTid">&nbsp;&nbsp;&nbsp;</span>&nbsp; drops</td>
 +
 +
                                                    <td>(of 0.8 mg/mL eyedrop)</td>
 +
                                                </tr>
 +
                                            </tbody>
 +
                                        </table>
 +
 +
                                    </div>
 +
                                  </div>
 +
                            </div>
 +
                               
 +
                                       
 +
                         
 +
 +
                            </div>
 +
                               
 +
 +
 +
           
 +
                           
 +
                           
 +
                               
 +
                           
 +
                         
 +
                        </div> <!-- Container -->
 +
                   
 +
               
 +
               
 +
               
 +
                   
 +
            </div>
 +
</div>
 +
    </div>
 +
 +
<br>
 +
<br><br>
 +
 +
<canvas id="canvas-container" style = "z-index:-1"></canvas>
 +
<script type="text/javascript" src='https://2016.igem.org/Template:TAS_Taipei/js/field?action=raw&ctype=text/javascript'></script>
 +
 +
</body>
 +
 +
 +
 +
 +
 +
 +
 +
 +
<style type='text/css'>
 +
    #bg { position: fixed; top: 0; left: 0; }
 +
    .bgwidth { width: 100%; }
 +
    .bgheight { height: 100%; }
 +
</style>
 +
 +
<div class="backgroundpic">
 +
<img src="https://static.igem.org/mediawiki/2016/e/e5/T--TAS_Taipei--Taipei_Background_1.0.jpg" style="z-index:0" width="100%" height="100%" id="bg" alt="" >
 
</div>
 
</div>
 +
 +
<script>
 +
var nowRadius = 0
 +
$(function() {
 +
    if (screen.width > 1800)
 +
      $("#slideoutco").fadeOut(0);
 +
    $({blurRadius: 0}).animate({blurRadius: 10}, {
 +
        duration: 20000,
 +
        easing:'swing', // or "linear"
 +
                        // use jQuery UI or Easing plugin for more options
 +
        step: function() {
 +
            console.log(this.blurRadius);
 +
            if ($("#bluebutton").hasClass("isOn") ) {return;};
 +
            if($('#redbutton').hasClass("isOn") ) {return;}
 +
            $('.backgroundpic').css({
 +
                "-webkit-filter": "blur("+this.blurRadius+"px)",
 +
                "filter": "blur("+this.blurRadius+"px)"
 +
 +
            });
 +
            nowRadius = this.blurRadius;
 +
        var LOCSnum = Math.round(nowRadius*6/9);
 +
        var NineLOCSnum = Math.round(nowRadius*6/9*10);
 +
        /**if (NineLOCSnum > 20) switchMessage("YELLOW","<b> Oh no! </b> Cataracts are forming! Click on the Eyedrop Tab and get <b>TREATMENT</b> eyedrops!", currentColor()=="GREEN");
 +
        if (NineLOCSnum == 55) $("#slideoutco").fadeOut(1000);
 +
        if (NineLOCSnum > 60) switchMessage("RED","Your cataracts are very severe. You need to get TREATMENT fast by clicking the Eyedrop Tab", currentColor()=="YELLOW");*/
 +
        if (LOCSnum > 6) {LOCSnum = "6+"; $('#LOCS').text(LOCSnum+"");}
 +
        else $('#LOCS').text(LOCSnum+"");
 +
       
 +
        if (LOCSnum ==0) document.getElementById('bluebutton').click();
 +
        }
 +
    });
 +
 +
});
 +
 +
startBlur= function(speed) {
 +
    $({blurRadius: nowRadius}).animate({blurRadius: 10}, {
 +
        duration: speed,
 +
        easing: 'swing', // or "linear"
 +
                        // use jQuery UI or Easing plugin for more options
 +
        step: function() {
 +
            console.log(this.blurRadius);
 +
            if ($("#bluebutton").hasClass("isOn") ) {return;};
 +
            if($('#redbutton').hasClass("isOn") ) {return;}
 +
 +
            $('.backgroundpic').css({
 +
                "-webkit-filter": "blur("+this.blurRadius+"px)",
 +
                "filter": "blur("+this.blurRadius+"px)"
 +
 +
            });
 +
 +
        nowRadius = this.blurRadius;
 +
        var LOCSnum = Math.round(nowRadius*6/9);
 +
        var NineLOCSnum = Math.round(nowRadius*6/9*10);
 +
        /**if (NineLOCSnum == 15) $("#slideoutco").fadeOut(400);
 +
        if (NineLOCSnum > 20) switchMessage("RED","<b>Cataracts</b> are creeping back again! Click the PREVENTION eyedrop to add GSR into your eyes!", currentColor()=="BLUE");*/
 +
        if (LOCSnum > 6) {LOCSnum = "6+"; $('#LOCS').text(LOCSnum+"");}
 +
        else $('#LOCS').text(LOCSnum+" ");
 +
       
 +
       
 +
        }
 +
    });
 +
};
 +
 +
stopBlur= function(speed) {
 +
 +
    $({blurRadius: nowRadius}).animate({blurRadius: 0}, {
 +
        duration: speed,
 +
        easing: 'swing', // or "linear"
 +
                        // use jQuery UI or Easing plugin for more options
 +
        step: function() {
 +
            console.log(this.blurRadius);
 +
        if ($("#redbutton").hasClass("isOn") ) {} else{return;};
 +
            $('.backgroundpic').css({
 +
                "-webkit-filter": "blur("+this.blurRadius+"px)",
 +
                "filter": "blur("+this.blurRadius+"px)"
 +
 +
            });
 +
        nowRadius = this.blurRadius;
 +
        var LOCSnum = Math.round(nowRadius*6/9);
 +
        var NineLOCSnum = Math.round(nowRadius*6/9*10);
 +
         
 +
        /**if (NineLOCSnum < 68){ if (NineLOCSnum > 10) if(currentColor()=="RED" ||  currentColor() == "BLUE") $("#slideoutco").fadeOut(0); switchMessage("YELLOW","<b> Treating</b> your cataract with <b>25HC Eyedrops </b>", currentColor()=="RED");
 +
                              }
 +
        if (NineLOCSnum == 9) $("#slideoutco").fadeOut(0);
 +
       
 +
           
 +
        if (NineLOCSnum < 5) {
 +
            if ($("#bluebutton").hasClass("isOn")){
 +
                   
 +
                switchMessage("GREEN","<b>Your eyes are <i>pernamently</i> crystal clear!</b> Treatment is not needed, so don't forget to turn it off!. Click the question mark to learn more.", currentColor()=="BLUE")
 +
            }
 +
            else switchMessage("BLUE","Your eyes are crystal clear! To avoid waste, please turn off the <b>TREATMENT</b> eyedrop.", currentColor()=="YELLOW");
 +
        }*/
 +
        if (LOCSnum > 6) LOCSnum = "6+";
 +
        else LOCSnum = LOCSnum +" ";
 +
        $('#LOCS').text(LOCSnum+"");   
 +
       
 +
        }
 +
    });
 +
   
 +
   
 +
};
 +
 +
function chooseBlur() {
 +
  if ($("#redbutton").hasClass("isOn") )
 +
      {
 +
      stopBlur(4500);
 +
 
 +
            }
 +
 
 +
    else {
 +
            if($("#bluebutton").hasClass("isOn") ) {}
 +
            else {startBlur(12000);}
 +
          }
 +
    /**if (!$("#redbutton").hasClass("isOn"))
 +
        if ($("#bluebutton").hasClass("isOn"))
 +
            {
 +
                $("#slideoutco").fadeOut(0);
 +
                switchMessage("BLUE","Great! Furthur cataract formation is prevented with GSR Eyedrops. Now use <b>TREATMENT</b> eyedrops one last time.", currentColor()=="RED")
 +
            }*/
 +
};
 +
 +
 +
</script>
 +
 +
<script>
 +
 +
function switchToggleB() {
 +
    if ( $("#bluebutton").hasClass("isOn") ) {
 +
        $("#bluebutton").removeClass("isOn"); }
 +
  else { $("#bluebutton").addClass("isOn"); }
 +
};
 +
function switchToggleR() {
 +
    if ( $("#redbutton").hasClass("isOn") ) {
 +
        $("#redbutton").removeClass("isOn"); }
 +
  else { $("#redbutton").addClass("isOn"); }
 +
};
 +
   
 +
function currentColor() {
 +
    if ($("#slidecontenttext").hasClass("alert-danger"))
 +
        return "RED";
 +
    if ($("#slidecontenttext").hasClass("alert-warning"))
 +
        return "YELLOW";
 +
    if ($("#slidecontenttext").hasClass("alert-info"))
 +
        return "BLUE";
 +
    if ($("#slidecontenttext").hasClass("alert-success"))
 +
        return "GREEN";
 +
    else return "NONE"
 +
};
 +
function switchMessage(color, textInside, refresh) {
 +
    var entirebox = document.getElementById("slideoutco");
 +
 +
    if (refresh)
 +
    {$(entirebox).fadeOut(100);
 +
    if ($("#slidecontenttext").hasClass("alert-danger"))
 +
        $("#slidecontenttext").removeClass("alert-danger");
 +
    if ($("#slidecontenttext").hasClass("alert-warning"))
 +
        $("#slidecontenttext").removeClass("alert-warning");
 +
    if ($("#slidecontenttext").hasClass("alert-info"))
 +
        $("#slidecontenttext").removeClass("alert-info");
 +
    if ($("#slidecontenttext").hasClass("alert-success"))
 +
        $("#slidecontenttext").removeClass("alert-success");
 +
    if (color == "RED")
 +
        $("#slidecontenttext").addClass("alert-danger");
 +
    if (color == "YELLOW")
 +
        $("#slidecontenttext").addClass("alert-warning");
 +
    if (color == "BLUE")
 +
        $("#slidecontenttext").addClass("alert-info");
 +
    if (color == "GREEN")
 +
        $("#slidecontenttext").addClass("alert-success");
 +
   
 +
   
 +
    $("#slidecontenttext").html(textInside);
 +
    $(entirebox).fadeIn(500);
 +
    }
 +
   
 +
};
 +
 +
 +
</script>
 +
 +
 +
 +
 +
 +
 +
<canvas id="canvas-container" style = "z-index:-1" hidden></canvas>
 +
<script type="text/javascript" src='https://2015.igem.org/Template:TAS_Taipei/js/field?action=raw&ctype=text/javascript' hidden></script/>
 +
 +
 +
 +
<script type="text/javascript">
 +
/* Toggle between adding and removing the "active" and "show" classes when the user clicks on one of the "Section" buttons. The "active" class is used to add a background color to the current button when its belonging panel is open. The "show" class is used to open the specific accordion panel */
 +
var acc = document.getElementsByClassName("accordion");
 +
var i;
 +
 +
for (i = 0; i < acc.length; i++) {
 +
    acc[i].onclick = function(){
 +
        this.classList.toggle("active");
 +
        this.nextElementSibling.classList.toggle("show");
 +
    }
 +
}
 +
</script>
 +
 +
<script type="text/javascript">
 +
$("#category_navbar a").on('click', function(event) {
 +
    // Make sure this.hash has a value before overriding default behavior
 +
    if (this.hash !== "") {
 +
      // Prevent default anchor click behavior
 +
      event.preventDefault();
 +
 +
      // Store hash0
 +
      var hash = this.hash;
 +
 +
      // Using jQuery's animate() method to add smooth page scroll
 +
      // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
 +
      $('html, body').animate({
 +
        scrollTop: $(hash).offset().top
 +
      }, 800, function(){
 +
 
 +
        // Add hash (#) to URL when done scrolling (default click behavior)
 +
        window.location.hash = hash;
 +
      });
 +
    }  // End if
 +
  });
 +
 +
 +
</script>
 +
 +
<div id="slideout">
 +
    <div id="slidecontent">
 +
        <h3>Prevention</h3>
 +
        <h5>GSR Eyedrop</h5>
 +
        <label class="switch">
 +
            <input id="bluebutton" onClick="switchToggleB(); chooseBlur()" type="checkbox">
 +
            <div class="slider round bluecolorbutton"></div>
 +
        </label>
 +
<br>
 +
 +
        <h3>Treatment</h3>
 +
        <h5>25HC Eyedrop</h5>
 +
        <label class="switch">
 +
            <input id="redbutton" onClick="switchToggleR(); chooseBlur()" type="checkbox">
 +
            <div class="slider round redcolorbutton"></div>
 +
        </label>
 +
        <h4><b> LOCS: <span id="LOCS">0 &#160;</span></b> &#160; &#160; <a href="https://2016.igem.org/Team:TAS_Taipei/Wiki_Standard_Pages#Animation"><button  type="button" class="btn btn-danger btn-md">?</button> </a>
 +
 +
    </div>
 +
    <div id="clickme">
 +
    <h2 class="vertical-text" style="Lato" !important>
 +
            <br> Eyedrops
 +
    </h2>
 +
        <br><br><br>
 +
       
 +
    </div>
 +
</div>
 +
 +
<div id="slideoutco">
 +
    <div id="slidecontentco">
 +
        <div id="slidecontenttext" class="alert alert-danger">
 +
            <p style="font-size:14px !important"> <a href="#" class="close" data-dismiss="alert">&times;</a>
 +
                <strong>Zoom out to see animation.</strong> &#160; &#160; &#160; &#160; &#160;<a href="https://2016.igem.org/Team:TAS_Taipei/Wiki_Standard_Pages#Animation"><button  type="button" class="btn btn-danger btn-sm">?</button> </a><span style="font-size:14px"><br>Your screen resolution is too low unless you zoom out </span></p>
 +
           
 +
        </div>
 +
    </div>
 +
</div>
 +
 +
 +
<javascript>
 +
   
 +
</javascript>
 +
 +
<style type='text/css'>
 +
 +
#slideout {
 +
    background: #FFD700;
 +
    position: fixed;
 +
    height: 300px;
 +
    width: 200px;
 +
    top: 30%;
 +
    right:-150px;
 +
    padding-left: 60px;
 +
    z-index:30;
 +
    border-radius: 25px;
 +
 +
 +
}
 +
   
 +
#slideoutco {
 +
    position: fixed;
 +
    height: 200px;
 +
    width: 300px;
 +
    top: 78%;
 +
    right:1%;
 +
    padding-left: 10px;
 +
    padding-right: 10px;
 +
    border-radius: 10px;
 +
    z-index:30;
 +
}
 +
   
 +
#clickme {
 +
    position: absolute;
 +
    top: 0; left: 0;
 +
    height: 300px;
 +
    width: 50px;
 +
    background: #FFBA49;
 +
    z-index:30;
 +
    border-radius: 25px 5px 5px 25px;
 +
}
 +
 +
#slidecontent {
 +
    float:left;
 +
}
 +
   
 +
#slidecontentco {
 +
    float:left;
 +
}
 +
 +
.vertical-text {
 +
transform: rotate(90deg);
 +
transform-origin: left bottom 0;
 +
  float: left;
 +
}
 +
/* The switch - the box around the slider */
 +
.switch {
 +
  position: relative;
 +
  display: inline-block;
 +
  width: 60px;
 +
  height: 34px;
 +
}
 +
 +
/* Hide default HTML checkbox */
 +
.switch input {display:none;}
 +
 +
/* The slider */
 +
.slider {
 +
  position: absolute;
 +
  cursor: pointer;
 +
  top: 0;
 +
  left: 0;
 +
  right: 0;
 +
  bottom: 0;
 +
  background-color: #ccc;
 +
  -webkit-transition: .4s;
 +
  transition: .4s;
 +
}
 +
 +
 +
.slider:before {
 +
  position: absolute;
 +
  content: "";
 +
  height: 26px;
 +
  width: 26px;
 +
  left: 4px;
 +
  bottom: 4px;
 +
  background-color: white;
 +
  -webkit-transition: .4s;
 +
  transition: .4s;
 +
}
 +
 +
input:checked + .slider.bluecolorbutton {
 +
  background-color: #2196F3;
 +
}
 +
 +
input:focus + .slider.bluecolorbutton {
 +
  box-shadow: 0 0 1px #2196F3;
 +
}
 +
 +
input:checked + .slider.redcolorbutton {
 +
  background-color: #FF0000;
 +
}
 +
 +
input:focus + .slider.redcolorbutton {
 +
  box-shadow: 0 0 1px #FF0000;
 +
}
 +
 +
 +
 +
input:checked + .slider:before {
 +
  -webkit-transform: translateX(26px);
 +
  -ms-transform: translateX(26px);
 +
  transform: translateX(26px);
 +
}
 +
 +
/* Rounded sliders */
 +
.slider.round {
 +
  border-radius: 34px;
 +
}
 +
 +
.slider.round:before {
 +
  border-radius: 50%;
 +
}
 +
input[type=text] {
 +
    width: 100%;
 +
    padding: 12px 20px;
 +
    margin: 8px 0;
 +
    box-sizing: border-box;
 +
    border: 3px solid #ccc;
 +
    -webkit-transition: 0.5s;
 +
    transition: 0.5s;
 +
    outline: none;
 +
}
 +
input[type=text]:focus {
 +
    border: 3px solid #555;
 +
}
 +
</style>
 +
<script>
 +
$(function () {
 +
    var rightVal = -150;
 +
   
 +
        $("#clickme").click(function () {
 +
       
 +
        rightVal = (rightVal * -1) - 150;
 +
        $(this).parent().animate({right: rightVal + 'px'}, {queue: false, duration: 500});
 +
    });
 +
   
 +
});
 +
 +
 +
 +
</script>
 +
 +
 +
</body>
  
 
</html>
 
</html>

Latest revision as of 01:54, 20 October 2016

Software - TAS Taipei iGEM Wiki




C◎UNTERACTS

Software

Generalized Nanoparticle Customizer

We built a nanoparticle customizer, which allows you to track the concentration and rates of drug delivery to any part of the body using nanoparticles. You can customize your own design of nanoparticles, and analyze its function inside the body.

These software tools are based off our model results. The specific equations used in this calculator can be found, in the collapsible details in the Model page.

This computational software can be used by future iGEM teams who are interested in using nanoparticles to efficiently deliver their synthesized proteins. The calculational tool is programmed on a Google Spreadsheet. Click the button below to visit the spreadsheet. Please make a copy of the spreadsheet to freely use it.

Cataract - Specific Calculator Tool

We also built two calculators, one for prevention, one for treatment, that is specific to our project.

CALCULATOR

Prevention

LOCS Score Threshold:
We guarentee that by applying this prevention eyedrop daily, your LOCS score will remain below your threshold for 50 years.


Prevention Results
Variable Value Source
Allowable LOCS    
Crystallin Damage       c.d. Model 1
GSR Maintained      uM Model 2
Nanoparticle Conc.      uM Model 3
Eyedrop Conc.      mM Model 4
Eyedrop Result      mg/mL

Treatment

Your current LOCS Score:
By applying the following treatment, leaving an hour before each dose of eyedrops, we guarentee that it will lower your LOCS score to essentially 0.


Treatment Results
Variable Value Source
Allowable LOCS    
Crystallin Damage       c.d. Model 2
Absorbance      a.u. Model 1
CH25H      uM Model 5
Eyedrop Conc.      uM Model 4
Eyedrop Result      mg/mL Model 4
# of Eyedrops      drops (of 0.8 mg/mL eyedrop)



Prevention

GSR Eyedrop

Treatment

25HC Eyedrop

LOCS: 0      


Eyedrops




× Zoom out to see animation.          
Your screen resolution is too low unless you zoom out