Difference between revisions of "Team:NCTU Formosa/Demonstrate"

(Prototype team page)
 
 
(29 intermediate revisions by 4 users not shown)
Line 1: Line 1:
−
{{NCTU_Formosa}}
+
{{NCTU Formosa/Navigation}}
−
 
+
{{NCTU Formosa}}
 
<html>
 
<html>
  
 +
<head>
 +
    <meta charset="UTF-8">
 +
    <title>NCTU_Formosa: Demonstration</title>
 +
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
 +
    <script src="jQueryAssets/jquery-1.11.1.min.js"></script>
 +
    <script src="jQueryAssets/jquery.ui-1.10.4.dialog.min.js"></script>
 +
    <link href="project_demonstration.css" rel="stylesheet" type="text/css">
 +
    <script src="project_demonstration.js" type="text/javascript"></script>
 +
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
  
 +
<style>
 +
body {
 +
    margin: 0;
 +
    padding: 0;
 +
    overflow-x: hidden;
 +
    height: 100vh;
 +
}
  
−
<div class="column full_size judges-will-not-evaluate">
+
html, body {
−
<h3>★  ALERT! </h3>
+
    overflow-x: hidden !important;
−
<p>This page is used by the judges to evaluate your team for the <a href="https://2017.igem.org/Judging/Medals">medal criterion</a> or <a href="https://2017.igem.org/Judging/Awards"> award listed above</a>. </p>
+
    -ms-overflow-x: hidden !important;
−
<p> Delete this box in order to be evaluated for this medal criterion and/or award. See more information at <a href="https://2017.igem.org/Judging/Pages_for_Awards"> Instructions for Pages for awards</a>.</p>
+
}
−
</div>
+
−
<div class="clear"></div>
+
  
 +
#fut {
 +
    background: white;
 +
    width: 100vw;
 +
    height: 50px;
 +
}
  
−
<div class="column full_size">
+
.line {
−
<h1>Demonstrate</h1>
+
    position: relative;
−
<h3>Gold Medal Criterion #4</h3>
+
    left: 10vw;
 +
    top: 10vmax;
 +
}
  
−
<p>
+
p {
−
Teams that can show their system working under real world conditions are usually good at impressing the judges in iGEM. To achieve gold medal criterion #4, convince the judges that your project works. There are many ways in which your project working could be demonstrated, so there is more than one way to meet this requirement. This gold medal criterion was introduced in 2016, so check our what 2016 teams did to achieve a their gold medals!
+
    text-align: justify;
−
</p>
+
    font-size: 1.3em !important;
 +
    font-family: Arial, sans-serif;
 +
    margin: 10px 0 0;
 +
}
  
−
<p>
+
h1{
−
Please see the <a href="https://2017.igem.org/Judging/Medals">2017 Medals Page</a> for more information.
+
    border: 0;
−
</p>
+
}
  
 +
h4{
 +
    text-align: center;
 +
    margin-top: 0px;
 +
    margin-bottom: 50px !important;
 +
}
  
−
</div>
 
  
 +
@font-face {
 +
    font-family: neo_latina;
 +
    src: url(https://static.igem.org/mediawiki/2017/4/46/Neo-latina-demo-FFP.ttf);
 +
}
  
−
<div class="column half_size">
+
.subtitle>h6 {
 +
    font-family: neo_latina;
 +
    font-size: 3.9em;
 +
    position: relative;
 +
    left: 25px;
 +
    margin-top: 50px;
 +
    margin-bottom: 10px;
 +
    line-height: 1em;
 +
}
  
−
<h4> What should we do for our demonstration?</h4>
+
.subtitle>h5 {
 +
    font-family: neo_latina;
 +
    font-size: 1.95em;
 +
    position: relative;
 +
    left: 50px;
 +
    margin-top: -10px;
 +
    margin-bottom: 10px;
 +
    line-height: 1em;
 +
}
  
−
<h5> Standard teams </h5>
+
.demo_content {
 +
    margin: 10vh 10vw 0vh;
 +
}
  
−
<p>
+
.sub_text{
−
If you have built a proof of concept system, you can demonstrate it working under real world conditions. If you have built a biological device that is intended to be a sensor, can you show it detecting whatever it is intended to sense. If it is intended to work in the field, you can show how this might work using a simulated version in the lab, or a simulation of your device in the field.<strong> Please note biological materials must not be taken out of the lab</strong>.
+
    width:65vw;
−
</p>
+
    position: relative;
−
</div>
+
    left: 5vw;
 +
}
  
−
<div class="column half_size">
+
.sub2_text{
 +
    width:60vw;
 +
    position: relative;
 +
    left: 10vw;
 +
    line-height: 15px;
 +
    margin-bottom: 10px;
 +
}
  
−
<br>
 
−
<h5> Special track teams </h5>
 
  
−
<p>
+
/*----------------------------------------------------------------------------*/
−
Special track teams can achieve this medal criterion by bringing their work to the Jamboree and showcasing it in the track event. Art & Design, Measurement, Hardware and Software tracks will all have showcase events at the Giant Jamboree.<strong> Please note biological materials must not be taken out of the lab</strong>.
+
−
</p>
+
  
  
−
</div>
+
/*----------------------------------------------------------------------------*/
 +
.hyperlink{
 +
position: relative;
 +
top: 4vmax;
 +
width: 100vw;
 +
height: 20vmax;
 +
    max-width: 100vw;
 +
}
  
 +
.first_line{
 +
    position: relative;
 +
    left: 38vw;
 +
}
  
 +
.second_line{
 +
    position: relative;
 +
    left: 38vw;
 +
top: -1vmax;
 +
}
  
 +
#first{
 +
position: absolute;
 +
left: 0.1vw;
 +
top: 3.5vmax;
 +
width: 23vw;
 +
    -webkit-transition: all 0.5 ease;
 +
    -moz-transition: all 0.5 ease;
 +
    -o-transition: all 0.5 ease;
 +
    -ms-transition: all 0.5 ease;
 +
    transition: all 0.5 ease;
 +
}
 +
 +
#second{
 +
position:absolute;
 +
left: 12.6vw;
 +
top: 8vmax;
 +
width: 23vw;
 +
    -webkit-transition: all 0.5 ease;
 +
    -moz-transition: all 0.5 ease;
 +
    -o-transition: all 0.5 ease;
 +
    -ms-transition: all 0.5 ease;
 +
    transition: all 0.5 ease;
 +
}
 +
 +
#third{
 +
position: absolute;
 +
left: 24vw;
 +
top: 2.5vmax;
 +
width: 23vw;
 +
    -webkit-transition: all 0.5 ease;
 +
    -moz-transition: all 0.5 ease;
 +
    -o-transition: all 0.5 ease;
 +
    -ms-transition: all 0.5 ease;
 +
    transition: all 0.5 ease;
 +
}
 +
 +
#fourth{
 +
position: absolute;
 +
left: 38vw;
 +
width: 23vw;
 +
    -webkit-transition: all 0.5 ease;
 +
    -moz-transition: all 0.5 ease;
 +
    -o-transition: all 0.5 ease;
 +
    -ms-transition: all 0.5 ease;
 +
    transition: all 0.5 ease;
 +
}
 +
 +
#fifth{
 +
position: absolute;
 +
left: 52vw;
 +
top: 8.5vmax;
 +
width: 23vw;
 +
    -webkit-transition: all 0.5 ease;
 +
    -moz-transition: all 0.5 ease;
 +
    -o-transition: all 0.5 ease;
 +
    -ms-transition: all 0.5 ease;
 +
    transition: all 0.5 ease;
 +
}
 +
 +
#sixth{
 +
position: absolute;
 +
left: 65vw;
 +
top: 3.5vmax;
 +
width: 23vw;
 +
    -webkit-transition: all 0.5 ease;
 +
    -moz-transition: all 0.5 ease;
 +
    -o-transition: all 0.5 ease;
 +
    -ms-transition: all 0.5 ease;
 +
    transition: all 0.5 ease;
 +
}
 +
 +
#seventh{
 +
position:absolute;
 +
left: 74.2vw;
 +
top: 8.5vmax;
 +
width: 23vw;
 +
    -webkit-transition: all 0.5 ease;
 +
    -moz-transition: all 0.5 ease;
 +
    -o-transition: all 0.5 ease;
 +
    -ms-transition: all 0.5 ease;
 +
    transition: all 0.5 ease;
 +
}
 +
/*----------------------------------------------------------------------------*/
 +
 +
#first:hover{
 +
    width: 25vw;
 +
    left: -0.9vw;
 +
}
 +
 +
#second:hover{
 +
    width: 25vw;
 +
    left: 11.6vw;
 +
}
 +
 +
#third:hover{
 +
    width: 25vw;
 +
    left: 23vw;
 +
}
 +
 +
#fourth:hover{
 +
    width: 25vw;
 +
    left: 37vw;
 +
}
 +
 +
#fifth:hover{
 +
    width: 25vw;
 +
    left: 52vw;
 +
}
 +
 +
#sixth:hover{
 +
    width: 25vw;
 +
    left: 65vw;
 +
}
 +
 +
#seventh:hover{
 +
    width: 25vw;
 +
    left: 73.2vw;
 +
}
 +
/*----------------------------------------------------------------------------*/
 +
/*----------------------------------------------------------------------------*/
 +
 +
 +
/*----------------------------------------------------------------------------*/
 +
 +
span>a:link {
 +
    color: #85CFEA;
 +
}
 +
 +
span>a:visited {
 +
    color: #85CFEA;
 +
}
 +
 +
span>a:hover {
 +
    color: blue;
 +
}
 +
 +
span>a:active {
 +
    color: blue;
 +
}
 +
 +
span>a {
 +
    text-decoration: none;
 +
}
 +
 +
 +
/*----------------------------------------------------------------------------*/
 +
 +
 +
/*----------------------------------------------------------------------------*/
 +
 +
.demo_paraweb, .demo_ptbox {
 +
    border-width: 2px;
 +
    border-style: solid;
 +
    border-color: #85CFEA;
 +
    position: relative;
 +
    margin-top: 0px;
 +
    margin-bottom: 100px;
 +
}
 +
 +
.sublist {
 +
    position: relative;
 +
    left: 20px;
 +
    margin-bottom: -10px;
 +
}
 +
 +
.show, .show2 {
 +
    margin: 1vw 2vw;
 +
}
 +
 +
.hide, .hide2 {
 +
    display: none;
 +
    margin: 1vw 2vw;
 +
}
 +
 +
.show_pic, .hide_pic, .show2_pic, .hide2_pic {
 +
    cursor: pointer;
 +
    width: 100px;
 +
    -webkit-transition: all 0.5s;
 +
    -moz-transition: all 0.5s;
 +
    -o-transition: all 0.5s;
 +
    -ms-transition: all 0.5s;
 +
    transition: all 0.5s;
 +
}
 +
 +
.show_pic:hover, .hide_pic:hover, .show2_pic:hover, .hide2_pic:hover {
 +
    width: 130px;
 +
}
 +
 +
.show>ol>li, .show2>ol>li {
 +
    font-size: 1.2em;
 +
    position: relative;
 +
    left: 20px;
 +
    width: 70vw;
 +
}
 +
 +
.hide>h1, .hide2>h1 {
 +
    margin-top: 5vw;
 +
}
 +
 +
.hide>ul>li, .hide2>ul>li {
 +
    font-size: 1.2em;
 +
    position: relative;
 +
    left: 20px;
 +
    width: 70vw;
 +
}
 +
 +
.hide>img {
 +
    margin-bottom: 50px;
 +
}
 +
 +
.sub_text{
 +
    width:65vw;
 +
    position: relative;
 +
    left: 5vw;
 +
}
 +
 +
 +
/*----------------------------------------------------------------------------*/
 +
/*----------------------------------------------------------------------------*/
 +
/*----------------------------------------------------------------------------*/
 +
/*----------------------------------------------------------------------------*/
 +
 +
</style>
 +
<!----------------------------------------------------------------------------->
 +
<script>
 +
$(document).ready(function(){
 +
    $(".show_pic").click(function(){
 +
        $(".hide").show(500);
 +
        $(".show").hide();
 +
    });
 +
});
 +
 +
$(document).ready(function(){
 +
    $(".hide_pic").click(function(){
 +
        $(".hide").hide();
 +
        $(".show").show(500);
 +
    });
 +
});
 +
 +
$(document).ready(function(){
 +
    $(".show2_pic").click(function(){
 +
        $(".hide2").show(500);
 +
        $(".show2").hide();
 +
    });
 +
});
 +
 +
$(document).ready(function(){
 +
    $(".hide2_pic").click(function(){
 +
        $(".hide2").hide();
 +
        $(".show2").show(500);
 +
    });
 +
});
 +
 +
</script>
 +
<!----------------------------------------------------------------------------->
 +
 +
</head>
 +
 +
<body>
 +
    <div class="demo_head"><img src="https://static.igem.org/mediawiki/2017/f/fb/Demo_head.png" width="100%"> </div>
 +
 +
    <div>
 +
        <div class="first_line"><img src="https://static.igem.org/mediawiki/2017/3/31/Hyperproject_line.png" width="24%"></div>
 +
        <div class="hyperlink">
 +
            <a href="https://2017.igem.org/Team:NCTU_Formosa/Description"><img src="https://static.igem.org/mediawiki/2017/a/a5/Hyperproject_des.png"  id="first"></a>
 +
 +
            <a href="https://2017.igem.org/Team:NCTU_Formosa/Applied_Design"><img src="https://static.igem.org/mediawiki/2017/9/95/Hyperproject_design.png"  id="second"></a>
 +
 +
            <a href="https://2017.igem.org/Team:NCTU_Formosa/Peptide_Prediction"><img src="https://static.igem.org/mediawiki/2017/1/1e/Hyperproject_ptpredic.png"  id="third"></a>
 +
 +
            <a href="https://2017.igem.org/Team:NCTU_Formosa/Disease_Occurrence_Prediction"><img src="https://static.igem.org/mediawiki/2017/7/70/Hyperproject_sgpredic.png"  id="fourth"></a>
 +
 +
            <a href="https://2017.igem.org/Team:NCTU_Formosa/Demonstrate"><img src="https://static.igem.org/mediawiki/2017/f/fc/Hyperproject_demo.png"  id="fifth"></a>
 +
 +
            <a href="https://2017.igem.org/Team:NCTU_Formosa/Contribution"><img src="https://static.igem.org/mediawiki/2017/0/01/Hyperproject_contri.png"  id="sixth"></a>
 +
 +
            <a href="https://2017.igem.org/Team:NCTU_Formosa/Improve"><img src="https://static.igem.org/mediawiki/2017/b/b5/Hyperproject_improve.png"  id="seventh"></a>
 +
        </div>
 +
        <div class="second_line"><img src="https://static.igem.org/mediawiki/2017/3/31/Hyperproject_line.png" width="24%"></div>
 +
    </div>
 +
 +
    <div class="demo_content">
 +
        <!----------------------------------------------------------------------------->
 +
        <div class="subtitle">
 +
            <h6>Parabase Website</h6>
 +
            <h5>- the demonstration of <span><a href="https://2017.igem.org/Team:NCTU_Formosa/Peptide_Prediction" target="_blank">Peptide Prediction</a></span></h5>
 +
        </div>
 +
 +
        <div class="demo_paraweb">
 +
            <div class="show">
 +
                <p>
 +
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;To present the work we did, we established a website named Parabase to demonstrate our peptide prediction system and the search system, showing their good functioning and convenience.
 +
                </p>
 +
                <p class="sublist">Content:</p>
 +
                <ol>
 +
                    <li>The antifungal peptide scoring system</li>
 +
                    <li>The search system</li>
 +
                </ol>
 +
 +
                <div><img class="show_pic" src="https://static.igem.org/mediawiki/2017/4/4f/Ptp_hide.png" style="display:block; margin:auto;"></div>
 +
            </div>
 +
            <div class="hide">
 +
 +
                <h1 style="margin: 0; border: 0">
 +
                    The website provides two functions:
 +
                </h1>
 +
 +
                <h1>
 +
                    1. Antifungal Prediction System:
 +
                </h1>
 +
 +
                <p style="margin: ">
 +
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;With SCM, we have already done the prediction of several peptides obtained from UniProt. Peptides' probability to be antifungal are shown on our website. Users can also do the prediction by themselves. Online prediction system is available on the website, which supports fasta format inputs of both manuals inputting amino acid sequences and files uploading. The output of the prediction of a peptide will be a score presenting the probability of having antifungal activity.
 +
                </p>
 +
 +
                <img src="https://static.igem.org/mediawiki/2017/f/fb/Ptp_result_photo3.jpeg" width="60%" style="display: block; margin: auto;">
 +
                <h4>Figure 1: Antifungal Scoring Card </h4>
 +
 +
                <h1>
 +
                    2. The Search System:
 +
                </h1>
 +
 +
                <p>
 +
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;We have collected hosts, pathogens, and antifungal peptides. The data stored in the database can be obtained via tagging keywords in the searching engine on the website. The keyword can be the scientific name for hosts and pathogens, and for searching antifungal peptides, the name or the amino acid sequence of the peptide is available.
 +
                </p>
 +
 +
                <p style="margin-bottom: 50px;">
 +
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;The searching results come out with the relationship between hosts, pathogens, and peptides. For searching the host, the pathogens that infect the one will be presented, while the pathogen to present the hosts and the peptides that inhibit the growth of the pathogen. And for searching the peptide, amino acid sequences, pathogens, sources, abstracts, and links to the references of the peptide will be given.
 +
                </p>
 +
 +
                <img src="https://static.igem.org/mediawiki/2017/6/6f/Ppparabaseeee.png" style="display: block; width: 60%; margin: auto;">
 +
                <h4>Figure 2: The main page of the Parabase website</h4>
 +
 +
                <p style="margin-top: 50px;">
 +
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;By our website, users can quickly find out the information such as: Which pathogens are also affected by the peptide? Which peptides may be helpful to a particular crop. It helps users to find peptides that are useful for preventing crop infection by a particular pathogen while not killing other pathogens that are not harmful to the crop.
 +
                </p>
 +
 +
                <div class="sub_text">
 +
                    <h2>
 +
                    Front End:
 +
                    </h2>
 +
 +
                    <p class="sub_text">
 +
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;For the front end, we used CSS to prettify the layout of the web page.
 +
                    </p>
 +
 +
                    <h2>
 +
                    Back End:
 +
                    </h2>
 +
 +
                    <p class="sub_text">
 +
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;On the back end, we gained our web server through NCTU Web Hosting service. We used PHP and Python to respond to web requests such as searching hosts, pathogens, antifungal peptides and doing antifungal peptide prediction.
 +
                        We also used SQLite for data storage.
 +
                    </p>
 +
                    <a href="http://web.it.nctu.edu.tw/~nctu_formosa/Parabase/" title="Parabase Website" target="_blank">
 +
                      <img id="paralink" src="https://static.igem.org/mediawiki/2017/c/ce/Contri_paralink.png" style="display: block; margin: auto;"></a>
 +
 +
                </div>
 +
                <div><img class="hide_pic" src="https://static.igem.org/mediawiki/2017/c/cb/Ptp_show.png" style="display:block; margin:auto;"></div>
 +
            </div>
 +
        </div>
 +
 +
        <!----------------------------------------------------------------------------->
 +
 +
        <div class="subtitle">
 +
            <h6>Plant Box Demonstration</h6>
 +
            <h5>- The demonstration of the <span><a href="https://2017.igem.org/Team:NCTU_Formosa/Disease_Occurrence_Prediction" target="_blank">Disease Occurrence Prediction</a></span></h5>
 +
        </div>
 +
 +
        <div class="demo_ptbox">
 +
            <div class="show2">
 +
                <p>
 +
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;To present the work we achieved, we made a plant box to simulate our Disease Occurrence System.
 +
                </p>
 +
 +
                <p class="sublist">Content:</p>
 +
                <ol>
 +
                    <li>Demonstration video </li>
 +
                    <li>Data sensing</li>
 +
                    <li>Prediction model</li>
 +
                    <li>Spraying system</li>
 +
                    <li>Data showing</li>
 +
                </ol>
 +
                <div><img class="show2_pic" src="https://static.igem.org/mediawiki/2017/4/4f/Ptp_hide.png" style="display:block; margin:auto;"></div>
 +
            </div>
 +
            <div class="hide2">
 +
                <p style="margin-bottom: 50px;">
 +
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;To present the work we achieved, we made a plant box to simulate our Disease Occurrence system.
 +
                </p>
 +
 +
                <video width="60%" controls style="display: block; margin: auto; border-radius: 10px;">
 +
                    <source src="#" type="video/ogg">
 +
                    <source src="https://static.igem.org/mediawiki/2017/5/54/IoTvideo.mp4" type="video/mp4">
 +
                </video>
 +
                <h4>Video 1: IoT demonstration</h4>
 +
 +
                <p style="margin-top: 50px;">
 +
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;We divided this system into four parts, including data sensing, prediction model, spraying system,and data showing.
 +
                </p>
 +
 +
                <h1>1. Data sensing:</h1>
 +
 +
                <p>
 +
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;The main purpose is to detect real-time environmental data such as relative humidity, temperature, rainfall, and pressure. Via the operation of the sensor, we can collect these data immediately. Then through the transmission of the Internet, we can send these data to IoTtalk for data integration.
 +
                </p>
 +
                <div class="sub_text">
 +
                    <h2>
 +
                    Sensors:
 +
                </h2>
 +
 +
 +
 +
                    <h2>
 +
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;- Humidity and temperature sensor: DHT22
 +
                    </h2>
 +
 +
                    <p>
 +
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;The DHT22 helps to measure the temperature and humidity. Through using it we can get the daily weather situation and receive the necessary information.
 +
                    </p>
 +
 +
                    <h2>
 +
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;- Atmospheric pressure sensor: BMP180
 +
                    </h2>
 +
 +
                    <p>
 +
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;BMP180 is mainly to measure the instantaneous atmospheric pressure, and it is relative to the altitude of the sea level.
 +
                    </p>
 +
 +
                    <h2>
 +
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;- Distance sensor: HC-SR04
 +
                    </h2>
 +
 +
                    <p>
 +
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;The initial function of the HC-SR04 is to measure the short distance. Depending on this feature, we wrote the code to convert it into rainfall sensor.
 +
                    </p>
 +
 +
                </div>
 +
 +
                <h1>2. Prediction model: </h1>
 +
 +
                <p>
 +
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;This part is the core of the whole system. We have set up another server to read the data stored in IoTtalk, then the model would calculate the probability of the diseases happening, and passed back to IoTtalk.
 +
                </p>
 +
 +
                <p style="text-align: center;">
 +
                    (For more detail, please check out <span><a href="https://2017.igem.org/Team:NCTU_Formosa/Disease_Occurrence_Prediction" target="_blank">Disease Occurrence Prediction</a></span> &amp; <span><a href="https://2017.igem.org/Team:NCTU_Formosa/Disease_Occurrence_Model" target="_blank">Disease Occurrence Model</a></span>)
 +
                </p>
 +
 +
                <h1>3. Spraying system: </h1>
 +
 +
                <p>
 +
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;This part is used to judge the probability of the disease occurrence prediction model. First of all, we would assume a threshold. If the calculating result was higher than the threshold, spraying system would be turned on,
 +
                    and sprayed the antifungal biopesticides.
 +
                </p>
 +
 +
                <h1>4. Data showing: </h1>
 +
 +
                <p>
 +
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Because of the assistance of the ThingSpeak website, patterns you wanted to observe could be shown, such as bar graphs, line graphs…etc. Thus, data collected on the IoTtalk platform would be shown in a convenient way.
 +
 +
 +
                    <div><img class="hide2_pic" src="https://static.igem.org/mediawiki/2017/c/cb/Ptp_show.png" style="display:block; margin:auto;"></div>
 +
            </div>
 +
        </div>
 +
 +
        <!----------------------------------------------------------------------------->
 +
<div class="subtitle"><h6>Github</h6><div>
 +
 +
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span><a href="https://github.com/igemsoftware2017/NCTU_Formosa/tree/master/database/Parabase" target = _blank>Parabase Website</a></span></p>
 +
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span><a href="https://github.com/igemsoftware2017/NCTU_Formosa/tree/master/IoT" target = _blank>IoT</a></span></p>
 +
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span><a href="https://github.com/igemsoftware2017/NCTU_Formosa/tree/master/predict%20model" target = _blank>Peptide Prediction Model</a></span></p>
 +
 +
 +
    </div>
 +
 +
 +
    <div id="fut"></div>
 +
 +
</body>
 
</html>
 
</html>
 +
 +
{{NCTU_Formosa/Footer}}

Latest revision as of 03:51, 2 November 2017

navigation

HOME
TEAM
PROJECT
Description
Design
Experiments
Notebook
InterLab
Contribution
Model
Results
Demonstrate
Improve
Attributions
PARTS
Parts
Basic Parts
Composite Parts
Part Collection
SAFETY
HUMAN PRACTICES
Silver HP
Integrated and Gold
Public Engagement
AWARDS
Applied Design
Entrepreneurship
Hardware
Measurement
Model
Plant
Software
JUDGING FORM
NCTU_Formosa: Demonstration
Parabase Website
- the demonstration of Peptide Prediction

     To present the work we did, we established a website named Parabase to demonstrate our peptide prediction system and the search system, showing their good functioning and convenience.

Content:

  1. The antifungal peptide scoring system
  2. The search system

The website provides two functions:

1. Antifungal Prediction System:

     With SCM, we have already done the prediction of several peptides obtained from UniProt. Peptides' probability to be antifungal are shown on our website. Users can also do the prediction by themselves. Online prediction system is available on the website, which supports fasta format inputs of both manuals inputting amino acid sequences and files uploading. The output of the prediction of a peptide will be a score presenting the probability of having antifungal activity.

Figure 1: Antifungal Scoring Card

2. The Search System:

     We have collected hosts, pathogens, and antifungal peptides. The data stored in the database can be obtained via tagging keywords in the searching engine on the website. The keyword can be the scientific name for hosts and pathogens, and for searching antifungal peptides, the name or the amino acid sequence of the peptide is available.

     The searching results come out with the relationship between hosts, pathogens, and peptides. For searching the host, the pathogens that infect the one will be presented, while the pathogen to present the hosts and the peptides that inhibit the growth of the pathogen. And for searching the peptide, amino acid sequences, pathogens, sources, abstracts, and links to the references of the peptide will be given.

Figure 2: The main page of the Parabase website

     By our website, users can quickly find out the information such as: Which pathogens are also affected by the peptide? Which peptides may be helpful to a particular crop. It helps users to find peptides that are useful for preventing crop infection by a particular pathogen while not killing other pathogens that are not harmful to the crop.

Front End:

     For the front end, we used CSS to prettify the layout of the web page.

Back End:

     On the back end, we gained our web server through NCTU Web Hosting service. We used PHP and Python to respond to web requests such as searching hosts, pathogens, antifungal peptides and doing antifungal peptide prediction. We also used SQLite for data storage.

Plant Box Demonstration
- The demonstration of the Disease Occurrence Prediction

     To present the work we achieved, we made a plant box to simulate our Disease Occurrence System.

Content:

  1. Demonstration video
  2. Data sensing
  3. Prediction model
  4. Spraying system
  5. Data showing

     To present the work we achieved, we made a plant box to simulate our Disease Occurrence system.

Video 1: IoT demonstration

     We divided this system into four parts, including data sensing, prediction model, spraying system,and data showing.

1. Data sensing:

     The main purpose is to detect real-time environmental data such as relative humidity, temperature, rainfall, and pressure. Via the operation of the sensor, we can collect these data immediately. Then through the transmission of the Internet, we can send these data to IoTtalk for data integration.

Sensors:

     - Humidity and temperature sensor: DHT22

     The DHT22 helps to measure the temperature and humidity. Through using it we can get the daily weather situation and receive the necessary information.

     - Atmospheric pressure sensor: BMP180

     BMP180 is mainly to measure the instantaneous atmospheric pressure, and it is relative to the altitude of the sea level.

     - Distance sensor: HC-SR04

     The initial function of the HC-SR04 is to measure the short distance. Depending on this feature, we wrote the code to convert it into rainfall sensor.

2. Prediction model:

     This part is the core of the whole system. We have set up another server to read the data stored in IoTtalk, then the model would calculate the probability of the diseases happening, and passed back to IoTtalk.

(For more detail, please check out Disease Occurrence Prediction & Disease Occurrence Model)

3. Spraying system:

     This part is used to judge the probability of the disease occurrence prediction model. First of all, we would assume a threshold. If the calculating result was higher than the threshold, spraying system would be turned on, and sprayed the antifungal biopesticides.

4. Data showing:

     Because of the assistance of the ThingSpeak website, patterns you wanted to observe could be shown, such as bar graphs, line graphs…etc. Thus, data collected on the IoTtalk platform would be shown in a convenient way.

Github

     Parabase Website

     IoT

     Peptide Prediction Model

Untitled Document