Difference between revisions of "Team:NCKU Tainan/Software"

(Prototype team page)
 
 
(58 intermediate revisions by 6 users not shown)
Line 1: Line 1:
{{IGEM_TopBar}}
+
{{Template:NCKU_Tainan/block_css_old}}
{{NCKU_Tainan}}
+
{{Template:NCKU_Tainan/template_css_old}}
 +
{{Template:NCKU_Tainan/bootstrap_min_css}}
 +
{{Template:NCKU_Tainan/header}}
 +
 
 +
 
 +
 
 
<html>
 
<html>
 +
    <head>
 +
        <link href="https://fonts.googleapis.com/css2?family=Kalam&display=swap" rel="stylesheet">
 +
        <link href="https://2020.igem.org/wiki/index.php?title=Template:NCKU_Tainan/aos_css&action=raw&ctype=text/css" rel="stylesheet">
 +
        <link href="https://fonts.googleapis.com/css2?family=Red+Hat+Display:ital,wght@0,400;0,500;0,700;0,900;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
 +
        <link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
 +
    </head>   
 +
<style>
 +
body{
 +
    font-family: 'Josefin Sans', sans-serif;
 +
    background-color: #FEFEF5 !important; /*背景顏色*/
 +
    padding-top: 0;/*讓內文在nav右邊*/
 +
    padding-left: 2rem;
 +
    position:relative;
 +
}
  
  
<div class="column full_size judges-will-not-evaluate">
+
#sideNav {
<h3>★  ALERT! </h3>
+
    text-align: left;
<p>This page is used by the judges to evaluate your team for the <a href="https://2020.igem.org/Judging/Medals">medal criterion</a> or <a href="https://2020.igem.org/Judging/Awards"> award listed below</a>. </p>
+
    position: fixed;
<p> Delete this box in order to be evaluated for this medal criterion and/or award. See more information at <a href="https://2020.igem.org/Judging/Pages_for_Awards"> Instructions for Pages for awards</a>.</p>
+
    top: 0;
</div>
+
    left: 0;
 +
    display: flex;
 +
    flex-direction: column;
 +
    width: 19.68vw;
 +
    height: 100vh;
 +
    z-index:1;
 +
}
 +
#sideNav .navbar-collapse .navbar-nav {
 +
    flex-direction: column;
 +
    width: 100%;
 +
}
  
 +
.navbar-expand-lg {/*not sure*/
 +
    flex-flow: row nowrap;
 +
    justify-content: flex-start;
 +
}
  
<div class="clear"></div>
+
.bg-primary {
 +
    background-color:#b0e0e4 !important; /*左方欄位顏色*/
 +
    opacity: 0.8 !important;
 +
}
 +
/*rgb(235, 203, 157)*/
 +
*{
 +
    scroll-behavior: smooth;
 +
}
 +
.navrow{
 +
    height:4.314vw;
 +
}   
 +
.navtrick{
 +
    position:relative;
 +
    top:2rem;
 +
}
 +
.nav-item{
 +
    font-size: 1.7vw;
 +
 +
#nav-item-list { /*特別調整左邊nav字的顏色*/
 +
    color:#042f46 !important;
 +
    white-space: nowrap;
 +
    font-family: 'Josefin Sans', sans-serif;
 +
}
  
 +
#nav-item-list:hover{ /*左邊nav變字的顏色*/
 +
    color:brown !important;
 +
}
  
<div class="column full_size">
+
#nav-item-list:active{ /*按下連結的顏色*/
<h1>Software</h1>
+
    color:brown !important;
<p>For Software Track teams, while you are not eligible for the Software Tool Special Prize, you can use this page to document your work.</p>
+
}
  
</div>
+
#nav-item-title{
<div class="column two_thirds_size">
+
    text-align: left;
<h3>Best Software Tool Special Prize</h3>
+
    position:relative;
<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.
+
    left: 2.3vw;
 +
    font-size: 2.3vw;
 +
    color:#042f46;
 +
    font-family: 'Josefin Sans', sans-serif;
 +
    /*border-bottom: 5px dotted #393939;*/
 +
}
  
  
<br><br>
+
#nav-item-list:active {
To compete for the <a href="https://2020.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://2020.igem.org/Judging/Judging_Form">judging form</a>.
+
    color: blue;
<br><br>
+
}
To be eligible, your software has to be documented and made available under an OSI approved open source license.
+
<br><br>
+
For software resources, please visit the <a href="https://2020.igem.org/Resources">Resources Hub</a>.
+
</p>
+
  
 +
/*#experience:hover ~ #nav-item-list[href="#experience"],
 +
#education:hover ~ #nav-item-list[href="#education"],
 +
#skills:hover ~ #nav-item-list[href="#skills"],
 +
#one:hover ~ nav a[href="#one"]
 +
{
 +
    color:red !important;
 +
}*/
  
 +
.container-fluid {
 +
    background-color: #FEFEF5;
 +
}
 +
.coverphoto{
 +
    opacity: 0.2;
 +
    width: 100vw;
 +
    position: absolute;
 +
    left: -2rem;
 +
    height: 100vh; 
 +
 +
section.resume-section-coverphoto {
 +
  min-height:93vh;
 +
 +
section.resume-section {
 +
    padding-left: 23.4vw;
 +
    padding-right: 7.12vw;
 +
    padding-top: 2.08vw;
 +
    padding-bottom: 5.1vw;
 +
}
 +
section.resume-section {
 +
    display: flex;
 +
    align-items: center;
 +
    max-width: 97vw;
 +
}
 +
#h1-title{
 +
    border-left: 5px solid #393939;
 +
}
 +
#bodyContent h1, h2, h3, h4{
 +
  font-family: 'Josefin Sans', sans-serif;
 +
}   
 +
#bodyContent h1{
 +
    font-size: 60px;
 +
}
 +
#bodyContent h2{
 +
    font-size: 2.5rem;
 +
}
 +
#bodyContent h3{
 +
    font-size: 1.75rem;
 +
}
 +
#bodyContent h4{
 +
    font-size: 1.3rem;
 +
 +
 +
#testtest1,#testtest2,#testtest3,#testtest4{
 +
    visibility:hidden;
 +
    margin-left: 0.5rem;
 +
    position:relative;
 +
    left: 1vw;
 +
    width: 4.3vw;
 +
    height: 4.3vw;
 +
}
 +
.caption-design{
 +
    position: relative;
 +
    top: 1rem;
 +
    font-size: 0.9rem;
 +
}
 +
/*.visible{
 +
    visibility:visible;
 +
    margin-left: 0.5rem;
 +
    width: 4rem;
 +
    height: 4rem;
 +
    transition-property: visibility;
 +
    transition-duration: 5s;
 +
}*/
 +
 +
.color{
 +
    color:brown !important; 
 +
}
 +
 +
#sideNav a.active {
 +
    color:brown !important;
 +
}
 +
 +
#navbarhead{
 +
  transition: top 0.3s; /* Transition effect when sliding down (and up) */
 +
 
 +
}
 +
 +
.hrmar{
 +
  margin: 0 8.32vw 0 20rem;
 +
}
 +
 +
.navbar-amend{
 +
  position:relative;
 +
  top:1.5%;
 +
}
 +
.navfont{
 +
  font-family: 'Josefin Sans', sans-serif;
 +
  /*font-weight: 500;*/
 +
  font-size: 22px;
 +
 +
#bodyContent p{
 +
  font-family: 'Red Hat Display', sans-serif;
 +
  letter-spacing: 0.4px;
 +
}
 +
abc p {
 +
    white-space:pre-wrap;
 +
    text-align:justify;
 +
    font-size:1.1rem;
 +
}
 +
.linklink{
 +
    color:black;
 +
    text-decoration:underline !important;
 +
}
 +
.linklink visited{
 +
    color:black;
 +
    text-decoration:underline !important;
 +
 +
.linklink hover{
 +
    color:#8BBED5 ;
 +
}
 +
.linklink active{
 +
    color:#8BBED5 ;
 +
}
 +
p{
 +
    margin: .4em 1rem .5em 0;
 +
}
 +
.narrow_eye_field{
 +
    width: 22rem;
 +
 +
}
 +
@media only screen and (max-width: 995px) {
 +
  #sideNav {
 +
    display:none;
 +
 
 +
  }
 +
  section.resume-section-coverphoto {
 +
    min-height: 94vh;
 +
 +
  section.resume-section {
 +
    padding-left: 16.8vw;
 +
    padding-right: 3rem;
 +
    padding-top: 1rem;
 +
    padding-bottom: 1rem;
 +
    display: flex;
 +
    align-items: center;
 +
    max-width: 80vw;
 +
}
 +
.hrmar{
 +
  margin: 0 2rem 0 0;
 +
}
 +
 
 +
 
 +
 +
 +
@media only screen and (max-width: 400px) {
 +
  .headtitle {
 +
    font-size: 2.5rem !important;
 +
 
 +
  }
 +
 +
 +
 
 +
</style>
 +
<body>
 +
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top" id="sideNav">
 +
        <a class="navbar-brand js-scroll-trigger" href="#page-top">
 +
            <span class="d-block d-lg-none">Clarence Taylor</span>
 +
            </a>
 +
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
 +
        <div class=" collapse navbar-collapse" id="navbarSupportedContent">
 +
            <ul class="navbar-nav navbar-amend" id="navtrick" style="top:-4vh;left:-1vw"> 
 +
 +
 +
                <li class="nav-item"><a class="nav-link js-scroll-trigger " id="nav-item-title">Software</a></li>           
 +
 +
<div class="row navrow">
 +
<div class="col-2"></div>
 +
<div class="col-6" style="z-index:2"><li  class="nav-item" id="exp1"><a class="nav-link js-scroll-trigger nav-list" id="nav-item-list" href="#modeling">- Modeling </a></li></div>
 +
<div class="col-4" style="z-index:1"><img id="testtest1" src="https://static.igem.org/mediawiki/2020/b/bb/T--NCKU_Tainan--logo_maginifier.png" alt="magnifier" style="left:-0.8vw"></div>
 
</div>
 
</div>
  
<div class="column third_size">
+
<div class="row navrow">
<div class="highlight decoration_A_full">
+
<div class="col-2"></div>
<h3> Inspiration </h3>
+
<div class="col-6" style="z-index:2"><li class="nav-item" id="exp2"><a class="nav-link js-scroll-trigger nav-list" id="nav-item-list" href="#app">- APP </a></li></div>
<p>
+
<div class="col-4" style="z-index:1"><img id="testtest2" src="https://static.igem.org/mediawiki/2020/b/bb/T--NCKU_Tainan--logo_maginifier.png" alt="magnifier" style="left:-4.8vw"></div>
Here are a few examples from previous teams:
+
</p>
+
<ul>
+
<li><a href="https://2016.igem.org/Team:BostonU_HW">2016 BostonU HW</a></li>
+
<li><a href="https://2016.igem.org/Team:Valencia_UPV">2016 Valencia UPV</a></li>
+
<li><a href="https://2014.igem.org/Team:Heidelberg/Software">2014 Heidelberg</a></li>
+
<li><a href="https://2014.igem.org/Team:Aachen/Project/Measurement_Device#Software">2014 Aachen</a></li>
+
</ul>
+
</div>
+
 
</div>
 
</div>
 +
             
 +
            </ul>
 +
        </div>
 +
    </nav>
 +
 
 +
  <abc>
 +
    <div class="container-fluid p-0">
 +
        <!-- Description-->
 +
        <section class="resume-section resume-section-coverphoto">
 +
            <img src="https://static.igem.org/mediawiki/2020/9/97/T--NCKU_Tainan--software-cover.jpeg" class="coverphoto">
 +
            <div class="resume-section-content" id="pdescription">
 +
                <div id="h1-title">
 +
                    <h1 class="mb-0 pl-2 headtitle" >
 +
                        Software
 +
                        <!--<span class="text-primary">Taylor</span>-->
 +
                    </h1>
 +
                    <h3 class="subheading mb-5 pl-2">
 +
                        Cloud service connecting you and me
 +
                    </h3>
 +
                </div>           
 +
            </div>
 +
        </section>
 +
        <!-- Approaches-->
 +
        <section class="resume-section">
 +
            <div class="resume-section-content" id="modeling">
 +
                <h2 class="mb-3">Software in Modeling</h2>
 +
                <h4 class="mb-3">Description</h4>
 +
                <div class="d-flex flex-column flex-md-row justify-content-between mb-2">
 +
                    <div class="flex-grow-1">                     
 +
                        <p> For every iGEM team, modeling is a crucial part to link wet team experimental results and dry team theories together. In most of the cases, we need to <b>simulate the behavior of chemicals or bacteria, such as distribution or concentration</b> of them. Scientists often utilize <b>partial differential equations (PDEs)</b> , namely differential equations containing two or more variables, to describe the target substances’ behavior. However, PDEs usually don’t have solutions due to the lack of strategies to deal with them. Here, we introduce a method that might help future iGEM teams to deal with PDEs—<b>double Laplace transform</b>.</p>
 +
                    </div>
 +
                  </div>
 +
                <h4 class="mb-3">Definition</h4>
 +
                <div class="d-flex flex-column flex-md-row justify-content-between mb-2">
 +
                    <div class="flex-grow-1">                     
 +
                        <p> The definition of the single-variable Laplace transform, which is what we normally adopted, is defined as below:</p>
 +
                  </div>
 +
                  </div>
 +
              <div class="container-fluid p-0">
 +
                <div class="row no-gutters">
 +
                <div class="col-lg ">
 +
                <figure class="d-flex flex-column justify-content-center align-items-center px-lg-3">
 +
                <a href="https://static.igem.org/mediawiki/2020/9/98/T--NCKU_Tainan--MissingFunc2.png" target="_blank" style="width:100%"><img src="https://static.igem.org/mediawiki/2020/9/98/T--NCKU_Tainan--MissingFunc2.png" alt="" title="" style="width:100%"></a>
 +
                </figure>
 +
                 
 +
                </div>
 +
                </div>
 +
                </div>
 +
              <div class="d-flex flex-column flex-md-row justify-content-between mb-2">
 +
                    <div class="flex-grow-1">                     
 +
                        <p> The definition of the double-variable Laplace transform (or, double Laplace transform) has a similar form as single-variable Laplace transform:</p>
 +
                  </div>
 +
                  </div>
 +
            <div class="container-fluid p-0">
 +
                <div class="row no-gutters">
 +
                <div class="col-lg ">
 +
                <figure class="d-flex flex-column justify-content-center align-items-center px-lg-3">
 +
                <a href="https://static.igem.org/mediawiki/2020/3/37/T--NCKU_Tainan--MissingFunc1.png" target="_blank" style="width:100%"><img src="https://static.igem.org/mediawiki/2020/3/37/T--NCKU_Tainan--MissingFunc1.png" alt="" title="" style="width:100%"></a>
 +
                </figure>
 +
                 
 +
                </div>
 +
                </div>
 +
                </div>
 +
              <div class="d-flex flex-column flex-md-row justify-content-between mb-2">
 +
                    <div class="flex-grow-1">                     
 +
                        <p> Notice that for single variable Laplace transform, the x domain is defined: { x | x > 0 }, so analogously, the domain of double Laplace transform, (x, y), is defined to be in the first quadrant, namely { (x, y) | x, y > 0 }.</p>
 +
                  </div>
 +
                  </div>
 +
                <h4 class="mb-3">Properties</h4> 
 +
                <div class="d-flex flex-column flex-md-row justify-content-between mb-2">
 +
                    <div class="flex-grow-1">                     
 +
                        <p> The general properties of double Laplace transform are listed below <sup>[<a href = "#ref4" class = "linklink">1</a>]</sup>:</p>
 +
                  </div> 
 +
                  </div>
 +
              <div class="container-fluid p-0">
 +
                <div class="row no-gutters">
 +
                <div class="col-lg ">
 +
                <figure class="d-flex flex-column justify-content-center align-items-center px-lg-3">
 +
 +
                <a href="https://static.igem.org/mediawiki/2020/a/a2/T--NCKU_Tainan--soft_table.png" target="_blank" style="width:70%"><img src="https://static.igem.org/mediawiki/2020/a/a2/T--NCKU_Tainan--soft_table.png" alt="" title="" style="width:100%"></a>
 +
                </figure>
 +
                    <figcaption class="caption-design" style="margin-bottom: 1rem;">Fig. 1A. Table of double Laplace transform properties.</figcaption>
 +
                </div>
 +
                </div>
 +
                </div>
 +
             
 +
              <h4 class="mb-3">Application of Double Laplace Transform: Solving Partial Differential Equations</h4> 
 +
                <div class="d-flex flex-column flex-md-row justify-content-between mb-2">
 +
                    <div class="flex-grow-1">                     
 +
                        <p> We performed a solution to one example of a partial differential equation using double Laplace transform.</p>
 +
                  </div> 
 +
                  </div>
 +
              <div class="d-flex flex-column flex-md-row justify-content-between mb-2">
 +
                    <div class="flex-grow-1">                     
 +
                      <p> Find the general solution of the equation below:</p>
 +
                  </div> 
 +
                  </div>
 +
              <div class="d-flex flex-column flex-md-row justify-content-between mb-2">
 +
                    <div class="flex-grow-1">                     
 +
                     
 +
                  </div> 
 +
                  </div>
 +
              <div class="container-fluid p-0">
 +
                <div class="row no-gutters">
 +
                <div class="col-lg ">
 +
                <figure class="d-flex flex-column justify-content-center align-items-center px-lg-3">
 +
                <a href="https://static.igem.org/mediawiki/2020/8/81/T--NCKU_Tainan--E1.png" target="_blank" style="width:80%"><img src="https://static.igem.org/mediawiki/2020/8/81/T--NCKU_Tainan--E1.png" alt="" title="" style="width:100%"></a>
 +
                </figure>
 +
                </div>
 +
                </div>
 +
                </div>
 +
              <div class="d-flex flex-column flex-md-row justify-content-between mb-2">
 +
                    <div class="flex-grow-1">                     
 +
                      <p> With boundary and initial conditions:</p>
 +
                  </div> 
 +
                  </div>
 +
           
 +
              <div class="container-fluid p-0">
 +
                <div class="row no-gutters">
 +
                <div class="col-lg ">
 +
                <figure class="d-flex flex-column justify-content-center align-items-center px-lg-3">
 +
                <a href="https://static.igem.org/mediawiki/2020/7/77/T--NCKU_Tainan--E2.png" target="_blank" style="width:80%"><img src="https://static.igem.org/mediawiki/2020/7/77/T--NCKU_Tainan--E2.png" alt="" title="" style="width:100%"></a>
 +
                </figure>
 +
                <figure class="d-flex flex-column justify-content-center align-items-center px-lg-3">
 +
                <a href="https://static.igem.org/mediawiki/2020/3/33/T--NCKU_Tainan--E3.png" target="_blank" style="width:80%"><img src="https://static.igem.org/mediawiki/2020/3/33/T--NCKU_Tainan--E3.png" alt="" title="" style="width:100%"></a>
 +
                </figure>
 +
                <figure class="d-flex flex-column justify-content-center align-items-center px-lg-3">
 +
                <a href="https://static.igem.org/mediawiki/2020/6/6b/T--NCKU_Tainan--E4.png" target="_blank" style="width:80%"><img src="https://static.igem.org/mediawiki/2020/6/6b/T--NCKU_Tainan--E4.png" alt="" title="" style="width:100%"></a>
 +
                </figure>
 +
                <figure class="d-flex flex-column justify-content-center align-items-center px-lg-3">
 +
                <a href="https://static.igem.org/mediawiki/2020/3/39/T--NCKU_Tainan--E5.png" target="_blank" style="width:80%"><img src="https://static.igem.org/mediawiki/2020/3/39/T--NCKU_Tainan--E5.png" alt="" title="" style="width:100%"></a>
 +
                </figure>
 +
                </div>
 +
                </div>
 +
                </div>
 +
             
 +
                  <div class="d-flex flex-column flex-md-row justify-content-between mb-2">
 +
                    <div class="flex-grow-1">                     
 +
                      <p> By adopting double Laplace transform method, we can transform the original equation:</p>
 +
                  </div> 
 +
                  </div>
 +
              <div class="d-flex flex-column flex-md-row justify-content-between mb-2">
 +
                    <div class="flex-grow-1">                     
 +
                     
 +
                  </div> 
 +
                  </div>
 +
             
 +
                <div class="container-fluid p-0">
 +
                <div class="row no-gutters">
 +
                <div class="col-lg ">
 +
                <figure class="d-flex flex-column justify-content-center align-items-center px-lg-3">
 +
                <a href="https://static.igem.org/mediawiki/2020/c/c2/T--NCKU_Tainan--E7.png" target="_blank" style="width:80%"><img src="https://static.igem.org/mediawiki/2020/c/c2/T--NCKU_Tainan--E7.png" alt="" title="" style="width:100%"></a>
 +
                </figure>
 +
                <figure class="d-flex flex-column justify-content-center align-items-center px-lg-3">
 +
                <a href="https://static.igem.org/mediawiki/2020/7/73/T--NCKU_Tainan--E6.png" target="_blank" style="width:80%"><img src="https://static.igem.org/mediawiki/2020/7/73/T--NCKU_Tainan--E6.png" alt="" title="" style="width:100%"></a>
 +
                </figure>
 +
                </div>
 +
                </div>
 +
                </div>
 +
              <div class="d-flex flex-column flex-md-row justify-content-between mb-2">
 +
                    <div class="flex-grow-1">                     
 +
                      <p> Solving F:</p>
 +
                  </div> 
 +
                  </div>
 +
           
 +
                <div class="container-fluid p-0">
 +
                <div class="row no-gutters">
 +
                <div class="col-lg ">
 +
                <figure class="d-flex flex-column justify-content-center align-items-center px-lg-3">
 +
                <a href="https://static.igem.org/mediawiki/2020/5/58/T--NCKU_Tainan--E8.png" target="_blank" style="width:80%"><img src="https://static.igem.org/mediawiki/2020/5/58/T--NCKU_Tainan--E8.png" alt="" title="" style="width:100%"></a>
 +
                </figure>
 +
                </div>
 +
                </div>
 +
                </div>
 +
              <div class="d-flex flex-column flex-md-row justify-content-between mb-2">
 +
                    <div class="flex-grow-1">                     
 +
                      <p> By operating inverse double Laplace transform on F, we can get the solution of C:</p>
 +
                  </div> 
 +
                  </div>
 +
             
 +
              <div class="container-fluid p-0">
 +
                <div class="row no-gutters">
 +
                <div class="col-lg ">
 +
                <figure class="d-flex flex-column justify-content-center align-items-center px-lg-3">
 +
                <a href="https://static.igem.org/mediawiki/2020/e/e5/T--NCKU_Tainan--E9.png" target="_blank" style="width:80%"><img src="https://static.igem.org/mediawiki/2020/e/e5/T--NCKU_Tainan--E9.png" alt="" title="" style="width:100%"></a>
 +
                </figure>
 +
                </div>
 +
                </div>
 +
                </div>
 +
              <h4 class="mb-3">Let Computer Calculate: Development of MATLAB Program to Conduct Double Laplace Transform</h4>
 +
              <div class="d-flex flex-column flex-md-row justify-content-between mb-2">
 +
                <div class="flex-grow-1">                     
 +
                      <p> We have demonstrated that double Laplace transform is a useful tool to deal with PDEs. However, double Laplace transform is not easy to calculate, since the process involves integrations that might not end up with a certain answer. Therefore, development of the program that can conduct double Laplace transform will be very helpful in solving PDEs.</p>
 +
                </div> 
 +
              </div> 
 +
          <div class="d-flex flex-column flex-md-row justify-content-between mb-2">
 +
                <div class="flex-grow-1">                     
 +
                      <p> MATLAB has a function called “laplace(F,x,s)” that can conduct a normal Laplace transform. However, if the function is not transformable, then the function cannot get the result. During the development of our models, we have built two MATLAB programs that has the function below:</p>
 +
                </div> 
 +
              </div>
 +
              <div class="d-flex flex-column flex-md-row justify-content-between mb-2">
 +
                    <div class="flex-grow-1">
 +
                    <ol class="mb-4">
 +
                        <li><p><b>Conducting double Laplace transform of PDEs.</b></p></li>
 +
                      <li><p><b>Making Laplace transform estimation of those who cannot be directly transformed by MATLAB’s function.</b></p></li>
 +
                    </ol>
 +
                    </div>   
 +
                  </div>
 +
             
 +
           
 +
              <div class="d-flex flex-column flex-md-row justify-content-between mb-2">
 +
                <div class="flex-grow-1">                     
 +
                      <p> What’s more, we make these two programs available on the internet with well documentation. Below is the link of the two programs:</p>
 +
                </div> 
 +
              </div>
 +
             
 +
              <div class="d-flex flex-column flex-md-row justify-content-between mb-2">
 +
                <div class="flex-grow-1">                     
 +
                  <p> On Github:<a href="https://github.com/iGem-NCKU-Tainan/EyekNOw2020" alt="" target="_blank"> Double_Laplace_Transform_and_Laplace_Estimation</a></p>
 +
                </div> 
 +
              </div>
 +
             
 +
              <h4 class="mb-3">Demonstration: Numerical Laplace Transform Estimator</h4>
 +
              <div class="d-flex flex-column flex-md-row justify-content-between mb-2">
 +
                    <div class="flex-grow-1">                     
 +
                        <p> <b>Code</b></p>
 +
                    </div>                 
 +
                </div>
 +
              <div style="overflow: auto; width:100%; height:250px; background-color:#272625; border:3px solid #a6a6a6;">
 +
                    <script src="https://gist.github.com/Sam-Sun-Medical/b38a782131edb604d8122eb586213924.js"></script>
 +
              </div>
 +
              <div class="d-flex flex-column flex-md-row justify-content-between mb-2">
 +
                    <div class="flex-grow-1">                     
 +
                        <p> <b>Result</b></p>
 +
                    </div>                 
 +
                </div>
 +
              <div class="d-flex flex-column flex-md-row justify-content-between mb-2">
 +
                    <div class="flex-grow-1">                     
 +
                        <p> Figures below show the running result of Numerical Laplace Transform Estimator. We plot out the approximation of target function's Laplace transformation utilize our program, and the real solution of target function's Laplace transformation. Result shows that our approximation is very close to the real situation. </p>
 +
                    </div>                 
 +
                </div>
 +
              <div class="container-fluid p-0">
 +
                <div class="row no-gutters">
 +
                <div class="col-lg ">
 +
                <figure class="d-flex flex-column justify-content-center align-items-center px-lg-3">
 +
                <a href="https://static.igem.org/mediawiki/2020/9/95/T--NCKU_Tainan--Estimator_Final.png" target="_blank" style="width:80%"><img src="https://static.igem.org/mediawiki/2020/9/95/T--NCKU_Tainan--Estimator_Final.png" alt="" title="" style="width:100%"></a>
 +
                </figure>
 +
                  <figcaption class="caption-design">Fig. A. Approximation of target function's Laplace transformation made by Estimator. We take n = 2000 steps to make this approximation.</figcaption>
 +
                </div>
 +
                </div>
 +
                </div>
 +
              <br><div class="container-fluid p-0">
 +
                <div class="row no-gutters">
 +
                <div class="col-lg ">
 +
                <figure class="d-flex flex-column justify-content-center align-items-center px-lg-3">
 +
                <a href="https://static.igem.org/mediawiki/2020/e/e2/T--NCKU_Tainan--Real_Final.png" target="_blank" style="width:80%"><img src="https://static.igem.org/mediawiki/2020/e/e2/T--NCKU_Tainan--Real_Final.png" alt="" title="" style="width:100%"></a>
 +
                </figure>
 +
                  <figcaption class="caption-design">Fig. B. Real solutions of target function's Laplace transformation. Calculation conducted by MATLAB built-in function.</figcaption>
 +
                </div>
 +
                </div>
 +
                </div>
 +
             
 +
              <br><h4 class="mb-3">Demonstration: Double Laplace Transform PDE Solver</h4>
 +
         
 +
              <div class="d-flex flex-column flex-md-row justify-content-between mb-2">
 +
                <div class="flex-grow-1">                     
 +
                  <p> <b>Code</b></p>
 +
                </div> 
 +
              </div>
 +
              <div style="overflow: auto; width:100%; height:250px; background-color:#272625; border:3px solid #a6a6a6;">
 +
                    <script src="https://gist.github.com/Sam-Sun-Medical/bc3f1ead4cff3d0d0e89751e07b4f41a.js"></script>
 +
              </div>
 +
             
 +
              <div class="d-flex flex-column flex-md-row justify-content-between mb-2">
 +
                <div class="flex-grow-1">                     
 +
                  <p> <b>Result</b></p>
 +
                </div> 
 +
              </div>
 +
              <div class="d-flex flex-column flex-md-row justify-content-between mb-2">
 +
                    <div class="flex-grow-1">                     
 +
                        <p> Figure below shows the running result of Double Laplace Transform PDE Solver. By applying initial conditions, boundary conditions and target PDE, we sucessfully plot out the double Laplace transform of target function. Result shows that the program can act as PDE solver. </p>
 +
                    </div>                 
 +
                </div>
 +
             
 +
              <div class="container-fluid p-0">
 +
                <div class="row no-gutters">
 +
                <div class="col-lg ">
 +
                <figure class="d-flex flex-column justify-content-center align-items-center px-lg-3">
 +
                <a href="https://static.igem.org/mediawiki/2020/5/54/T--NCKU_Tainan--AtLast.png" target="_blank" style="width:80%"><img src="https://static.igem.org/mediawiki/2020/5/54/T--NCKU_Tainan--AtLast.png" alt="" title="" style="width:100%"></a>
 +
                </figure>
 +
                <figcaption class="caption-design">Fig. C. Double Laplace transform of target function by only providing PDE, initial conditions and boundary conditions.</figcaption>
 +
                </div>
 +
                </div>
 +
              </div>
 +
             
 +
             
 +
            </div>
 +
        </section>
 +
        <hr class="hrmar" />
 +
        <!-- Inspiration-->
 +
        <section class="resume-section" >
 +
            <div class="resume-section-content" id="app">
 +
                <h2 class="mb-3">Software in APP</h2>
 +
                <h4 class="mb-3">Description</h4>
 +
                <div class="d-flex flex-column flex-md-row justify-content-between mb-2">
 +
                    <div class="flex-grow-1">                     
 +
                        <p>    In order to create a personalized IOP tracking system, we designed an app - Eye Cloud that works with Eye Screen. Eye Cloud not only displays the IOP value on the phone through the Bluetooth connection but also upload each measurement value to ThingSpeak’s personal account that is convenient for long-term tracking and observation. In addition, it can also be used as a tool for large-scale data collection to assist the development of Eye kNOw or other research related to intraocular pressure.</p>
 +
                </div>
 +
                </div>
 +
                <h4 class="mb-3">App Design</h4> 
 +
                <div class="container-fluid p-0">
 +
                <div class="row no-gutters">
 +
                <div class="col-lg ">
 +
                <figure class="d-flex flex-column justify-content-center align-items-center px-lg-3">
 +
                <a href="https://static.igem.org/mediawiki/2020/5/51/T--NCKU_Tainan--soft_app.png" target="_blank" style="width:60%"><img src="https://static.igem.org/mediawiki/2020/5/51/T--NCKU_Tainan--soft_app.png" alt="" title="" style="width:100%"></a>
 +
                <figcaption class="caption-design">Fig. 1. App overviewThingSpeak.</figcaption>
 +
                </figure>
 +
                </div>
 +
                </div>
 +
                </div>
 +
                <div class="d-flex flex-column flex-md-row justify-content-between mb-2">
 +
                    <div class="flex-grow-1">                     
 +
                        <p>    <a href="https://thingspeak.com/" alt="" target="_blank">ThingSpeak</a> is an IoT analytics platform service that allows us to aggregate, visualize, and analyze live data streams in the cloud. We can easily send data to ThingSpeak from Eye Screen, allowing users to upload and record IOP value through a URL (your personal API Keys)</p>
 +
                </div> 
 +
                </div>
 +
                <div class="container-fluid p-0">
 +
                <div class="row no-gutters">
 +
                <div class="col-lg ">
 +
                <figure class="d-flex flex-column justify-content-center align-items-center px-lg-3">
 +
                <a href="https://static.igem.org/mediawiki/2020/5/56/T--NCKU_Tainan--Soft_think.png " target="_blank" style="width:60%"><img src="https://static.igem.org/mediawiki/2020/5/56/T--NCKU_Tainan--Soft_think.png " alt="" title="" style="width:100%"></a>
 +
                <figcaption class="caption-design">Fig. 2. ThingSpeak homepage.</figcaption>
 +
                </figure>
 +
                </div>
 +
                </div>
 +
                </div> 
 +
             
 +
              <div class="d-flex flex-column flex-md-row justify-content-between mb-2">
 +
                    <div class="flex-grow-1">
 +
                    <ol class="mb-4">
 +
                        <li><p>Sign up for ThingSpeak.</p></li>
 +
                      <li><p>Click <b>Channels > My Channels</b>. Create a new channel.</p></li>
 +
                        <li><p>Check the boxes next to Fields 1–3. Enter these channel setting values:</p></li>
 +
                      <p style="position: relative;left: 2rem;">Name: Eye Screen</p>
 +
                      <p style="position: relative;left: 2rem;">Field 1: IOP (mV)</p>
 +
                      <li><p>Click <b>Save Channel</b> at the bottom of the settings.</p></li>
 +
                      <li><p>Click API Keys tab and copy the <b>write URL</b>.</p></li>
 +
                    </ol>
 +
                    </div>   
 +
                  </div>
 +
              <div class="container-fluid p-0">
 +
                <div class="row no-gutters">
 +
                <div class="col-lg ">
 +
                <figure class="d-flex flex-column justify-content-center align-items-center px-lg-3">
 +
                <a href="https://static.igem.org/mediawiki/2020/c/cb/T--NCKU_Tainan--API.png" target="_blank" style="width:60%"><img src="https://static.igem.org/mediawiki/2020/c/cb/T--NCKU_Tainan--API.png" alt="" title="" style="width:100%"></a>
 +
                <figcaption class="caption-design">Fig. 3. ThingSpeak setting ( API Keys > write URL ).</figcaption>
 +
                </figure>
 +
                </div>
 +
                </div>
 +
                </div>
 +
              <h4 class="mb-3">User manual of Eye Cloud</h4>
 +
              <div class="container-fluid p-0">
 +
                <div class="row no-gutters">
 +
                <div class="col-lg ">
 +
                <figure class="d-flex flex-column justify-content-center align-items-center px-lg-3">
 +
                <a href="https://static.igem.org/mediawiki/2020/d/dd/T--NCKU_Tainan--soft_all.png" target="_blank" style="width:60%"><img src="https://static.igem.org/mediawiki/2020/d/dd/T--NCKU_Tainan--soft_all.png" alt="" title="" style="width:100%"></a>
 +
                <figcaption class="caption-design">Fig. 4. Eye cloud.</figcaption>
 +
                </figure>
 +
                </div>
 +
                </div>
 +
                </div>
 +
              <div class="d-flex flex-column flex-md-row justify-content-between mb-2">
 +
                    <div class="flex-grow-1">
 +
                    <ol class="mb-4">
 +
                        <li><p>This is the homepage of Eye Cloud, with our lovely logo. Click the “START” button to start.</p></li>
 +
                        <li><p>Then the next screen will ask if you have applied for a ThingSpeak account.</p></li>
 +
                      <p style="position: relative;left: 2rem;">Click “Yes! Ready to start” button to next page and wait for your IOP receiving.</p>
 +
                            <p style="position: relative;left: 2rem;">Click “No, click to apply” button to link to ThingSpeak homepage.</p>
 +
                            <p style="position: relative;left: 2rem;">Click “No,thanks” button to start directly</p>
 +
                        <li><p>Click “Bluetooth ” button to connect with Eye Screen when reaching this page.</p></li>
 +
                      <li><p>Bluetooth connection screen.</p></li>
 +
                    </ol>
 +
                    </div>   
 +
                  </div>
 +
              <div class="d-flex flex-column flex-md-row justify-content-between mb-2">
 +
                    <div class="flex-grow-1">                     
 +
                        <p>    After the IOP value shows on the screen, click the “Record” button to upload data to your ThingSpeak’s personal account, monitoring daily or monthly measurement records.</p>
 +
                </div>
 +
                </div>
 +
              <div class="container-fluid p-0">
 +
                <div class="row no-gutters">
 +
                <div class="col-lg ">
 +
                <figure class="d-flex flex-column justify-content-center align-items-center px-lg-3">
 +
                <a href="https://static.igem.org/mediawiki/2020/5/5a/T--NCKU_Tainan--soft_data.png" target="_blank" style="width:60%"><img src="https://static.igem.org/mediawiki/2020/5/5a/T--NCKU_Tainan--soft_data.png" alt="" title="" style="width:100%"></a>
 +
                <figcaption class="caption-design">Fig. 5. Daily measurement records.</figcaption>
 +
                </figure>
 +
                </div>
 +
                </div>
 +
                </div>
 +
         </div>
 +
      </section>         
 +
        <hr class="hrmar" />
 +
        <section class="resume-section" >
 +
          <div class="resume-section-content" id="ref">
 +
            <h2>References</h2>
 +
              <ol>
 +
                <li id="ref1">Debnath L. The Double Laplace Transforms and Their Properties with Applications to Functional, Integral and Partial Differential Equations. International Journal of Applied and Computational Mathematics. 2015;2(2):223-241.</li>
 +
              </ol>
 +
          </div> 
 +
        </section> 
 +
 +
 +
    </div>
 +
    </abc>
 +
    <script src="https://2019.igem.org/Team:NCKU_Tainan/js/jquery-3_4_1_min_js?action=raw&amp;ctype=text/javascript"></script>
 +
    <script src="https://2019.igem.org/Team:NCKU_Tainan/js/4.3.1/bootstrap_min_js?action=raw&amp;ctype=text/javascript"></script>
 +
    <script src="https://2019.igem.org/Team:NCKU_Tainan/js/Universal?action=raw&amp;ctype=text/javascript"></script>
 +
    <script src="https://2020.igem.org/wiki/index.php?title=Template:NCKU_Tainan/aos_js&action=raw&ctype=text/javascript">
 +
</script>
 +
 +
 +
 +
</body>
 +
 +
 +
 
 +
<script>
 +
 +
document.getElementById("exp1").addEventListener("mouseover", function() {
 +
  document.getElementById("testtest1").style.visibility = "visible";
 +
});
 +
 +
document.getElementById("exp1").addEventListener("mouseout", function() {
 +
  document.getElementById("testtest1").style.visibility = "hidden";
 +
});
 +
 +
 +
 +
document.getElementById("exp2").addEventListener("mouseover", function() {
 +
  document.getElementById("testtest2").style.visibility = "visible";
 +
});
 +
document.getElementById("exp2").addEventListener("mouseout", function() {
 +
  document.getElementById("testtest2").style.visibility = "hidden";
 +
});
 +
 +
 +
document.getElementById("exp3").addEventListener("mouseover", function() {
 +
  document.getElementById("testtest3").style.visibility = "visible";
 +
});
 +
document.getElementById("exp3").addEventListener("mouseout", function() {
 +
  document.getElementById("testtest3").style.visibility = "hidden";
 +
});
 +
 +
 +
document.getElementById("exp4").addEventListener("mouseover", function() {
 +
  document.getElementById("testtest4").style.visibility = "visible";
 +
});
 +
document.getElementById("exp4").addEventListener("mouseout", function() {
 +
  document.getElementById("testtest4").style.visibility = "hidden";
 +
});
 +
 +
</script>
 +
<script> 
 +
$(document).ready(function(){
 +
  $('body').scrollspy({target: "#sideNav", offset: 300}); 
 +
});
 +
</script>
 +
<script> 
 +
var prevScrollpos = window.pageYOffset;
 +
window.onscroll = function() {
 +
  var currentScrollPos = window.pageYOffset;
 +
  if (prevScrollpos > currentScrollPos) {
 +
    document.getElementById("navbarhead").style.top = "0";
 +
  } else {
 +
    document.getElementById("navbarhead").style.top = "-85px";
 +
  }
 +
  prevScrollpos = currentScrollPos;
 +
}
 +
</script>
 +
<script>
 +
    $(document).ready(function(){
 +
  $('body').scrollspy({target: ".onepage-pagination", offset: 180}); 
 +
});
 +
</script>
 +
 +
 +
 +
<script>
 +
        $(window).on('load', function() {
 +
            AOS.init({
 +
                duration: 600,
 +
                mirror: true
 +
            });
 +
        });
 +
</script>
 +
<script> 
 +
        $(window).scroll(function(){
 +
        last=$("body").height()-$(window).height()-35                   
 +
        if($(window).scrollTop()>=last){
 +
            $("#sideNav").css('height', '85vh');
 +
            $("#navtrick").css('top', '0');
 +
            $(".navrow").css('height', '4.314vw');
 +
 +
        }
 +
        else {
 +
            $("#sideNav").css('height', '100vh');
 +
            $("#navtrick").css('top', '-4vh');
 +
    $(".navrow").css('height', '4.314vw');
  
 +
    }
 +
})
 +
</script>
 
</html>
 
</html>
 +
{{Template:NCKU_Tainan/gotop_old}}
 +
{{Template:NCKU_Tainan/footer_old}}

Latest revision as of 02:37, 28 October 2020


Software

Cloud service connecting you and me

Software in Modeling

Description

For every iGEM team, modeling is a crucial part to link wet team experimental results and dry team theories together. In most of the cases, we need to simulate the behavior of chemicals or bacteria, such as distribution or concentration of them. Scientists often utilize partial differential equations (PDEs) , namely differential equations containing two or more variables, to describe the target substances’ behavior. However, PDEs usually don’t have solutions due to the lack of strategies to deal with them. Here, we introduce a method that might help future iGEM teams to deal with PDEs—double Laplace transform.

Definition

The definition of the single-variable Laplace transform, which is what we normally adopted, is defined as below:

The definition of the double-variable Laplace transform (or, double Laplace transform) has a similar form as single-variable Laplace transform:

Notice that for single variable Laplace transform, the x domain is defined: { x | x > 0 }, so analogously, the domain of double Laplace transform, (x, y), is defined to be in the first quadrant, namely { (x, y) | x, y > 0 }.

Properties

The general properties of double Laplace transform are listed below [1]:

Fig. 1A. Table of double Laplace transform properties.

Application of Double Laplace Transform: Solving Partial Differential Equations

We performed a solution to one example of a partial differential equation using double Laplace transform.

Find the general solution of the equation below:

With boundary and initial conditions:

By adopting double Laplace transform method, we can transform the original equation:

Solving F:

By operating inverse double Laplace transform on F, we can get the solution of C:

Let Computer Calculate: Development of MATLAB Program to Conduct Double Laplace Transform

We have demonstrated that double Laplace transform is a useful tool to deal with PDEs. However, double Laplace transform is not easy to calculate, since the process involves integrations that might not end up with a certain answer. Therefore, development of the program that can conduct double Laplace transform will be very helpful in solving PDEs.

MATLAB has a function called “laplace(F,x,s)” that can conduct a normal Laplace transform. However, if the function is not transformable, then the function cannot get the result. During the development of our models, we have built two MATLAB programs that has the function below:

  1. Conducting double Laplace transform of PDEs.

  2. Making Laplace transform estimation of those who cannot be directly transformed by MATLAB’s function.

What’s more, we make these two programs available on the internet with well documentation. Below is the link of the two programs:

Demonstration: Numerical Laplace Transform Estimator

Code

Result

Figures below show the running result of Numerical Laplace Transform Estimator. We plot out the approximation of target function's Laplace transformation utilize our program, and the real solution of target function's Laplace transformation. Result shows that our approximation is very close to the real situation.

Fig. A. Approximation of target function's Laplace transformation made by Estimator. We take n = 2000 steps to make this approximation.

Fig. B. Real solutions of target function's Laplace transformation. Calculation conducted by MATLAB built-in function.

Demonstration: Double Laplace Transform PDE Solver

Code

Result

Figure below shows the running result of Double Laplace Transform PDE Solver. By applying initial conditions, boundary conditions and target PDE, we sucessfully plot out the double Laplace transform of target function. Result shows that the program can act as PDE solver.

Fig. C. Double Laplace transform of target function by only providing PDE, initial conditions and boundary conditions.

Software in APP

Description

In order to create a personalized IOP tracking system, we designed an app - Eye Cloud that works with Eye Screen. Eye Cloud not only displays the IOP value on the phone through the Bluetooth connection but also upload each measurement value to ThingSpeak’s personal account that is convenient for long-term tracking and observation. In addition, it can also be used as a tool for large-scale data collection to assist the development of Eye kNOw or other research related to intraocular pressure.

App Design

Fig. 1. App overviewThingSpeak.

ThingSpeak is an IoT analytics platform service that allows us to aggregate, visualize, and analyze live data streams in the cloud. We can easily send data to ThingSpeak from Eye Screen, allowing users to upload and record IOP value through a URL (your personal API Keys)

Fig. 2. ThingSpeak homepage.
  1. Sign up for ThingSpeak.

  2. Click Channels > My Channels. Create a new channel.

  3. Check the boxes next to Fields 1–3. Enter these channel setting values:

  4. Name: Eye Screen

    Field 1: IOP (mV)

  5. Click Save Channel at the bottom of the settings.

  6. Click API Keys tab and copy the write URL.

Fig. 3. ThingSpeak setting ( API Keys > write URL ).

User manual of Eye Cloud

Fig. 4. Eye cloud.
  1. This is the homepage of Eye Cloud, with our lovely logo. Click the “START” button to start.

  2. Then the next screen will ask if you have applied for a ThingSpeak account.

  3. Click “Yes! Ready to start” button to next page and wait for your IOP receiving.

    Click “No, click to apply” button to link to ThingSpeak homepage.

    Click “No,thanks” button to start directly

  4. Click “Bluetooth ” button to connect with Eye Screen when reaching this page.

  5. Bluetooth connection screen.

After the IOP value shows on the screen, click the “Record” button to upload data to your ThingSpeak’s personal account, monitoring daily or monthly measurement records.

Fig. 5. Daily measurement records.
 

References

  1. Debnath L. The Double Laplace Transforms and Their Properties with Applications to Functional, Integral and Partial Differential Equations. International Journal of Applied and Computational Mathematics. 2015;2(2):223-241.