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

(Prototype team page)
 
Line 1: Line 1:
−
{{NCTU_Formosa}}
+
{{Team:NCTU_Formosa}}
−
 
+
 
<html>
 
<html>
 +
<head>
 +
<meta charset="UTF-8">
  
 +
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
 +
<link href="https://2016.igem.org/Team:NCTU_Formosa/wiki_reset?action=raw&ctype=text/css" rel="stylesheet">
 +
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300" rel="stylesheet">
  
−
<div class="column full_size judges-will-not-evaluate">
 
−
<h3>★  ALERT! </h3>
 
−
<p>This page is used by the judges to evaluate your team for the <a href="https://2016.igem.org/Judging/Medals">gold medal criterion for proof of concept</a>. </p>
 
  
 +
<style type="text/css">
 +
#sideMenu, #top_title {display:none;}
 +
#content { padding:0px; width:100%; margin-top:-7px; margin-left:0px;}
 +
body {background-color:white; }
 +
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
 +
#top_menu_inside {margin-left: 20px; margin-bottom: 0px;}
  
−
<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>
 
−
</div>
 
  
 +
html, body, div, span, applet, object, iframe,
 +
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 +
a, abbr, acronym, address, big, cite, code,
 +
del, dfn, em, font, img, ins, kbd, q, s, samp,
 +
small, strike, strong, sub, tt, var,
 +
b, u, i, center,
 +
dl, dt, dd, ol, ul, li,
 +
fieldset, form, label, legend,
 +
table, caption, tbody, tfoot, thead, tr, th, td {
 +
    margin: 0;
 +
    padding: 0;
 +
    border: 0;
 +
    outline: 0;
  
 +
}
  
  
 +
* {
 +
  font-family: 'Open Sans', sans-serif;
 +
    font-weight: 300;
 +
}
 +
body{
 +
    background-color:rgb(51,51,51) !important;
 +
    line-height:1;
 +
}
 +
/*大圖*/
 +
@media screen and (min-width: 768px) {
 +
  .img-container{
 +
    height:100vh ;
 +
    overflow:hidden ;
 +
    width:100%;
 +
  }
 +
  .main-img{
 +
    top: 0;
 +
    bottom: 0;
 +
    left: 0;
 +
    right: 0;
 +
    width: 100%;
 +
    margin: auto;
 +
    z-index:999;
 +
    }
 +
}
 +
@media screen and (orientation: portrait) {
 +
    .img-container{
 +
        height:auto;
 +
        overflow:none;
 +
        width:100%;
 +
    }
 +
    .main-img{
 +
        top: 0;
 +
        bottom: 0;
 +
        left: 0;
 +
        right: 0;
 +
        width: 100%;
 +
        margin: auto;
 +
        z-index:999;
 +
    }
 +
}
  
−
<div class="column full_size">
 
  
 +
/*scroll navigaiton*/
 +
nav {
 +
  padding: 18px;
 +
  position: fixed;
 +
  height: auto;
 +
  left:0.5vw;
 +
  width: auto;
 +
  z-index: 9999;
 +
  top:25%;
 +
  margin: auto;
 +
}
  
−
<p>
+
nav .wrapper {
−
iGEM teams are great at making things work! We value teams not only doing an incredible job with theoretical models and experiments, but also in taking the first steps to make their project real.  
+
  padding: 0;
−
</p>
+
  width:100%;
 +
  height: 785px;
 +
}
  
 +
nav .nodes {
 +
  position: relative;
 +
  margin-top: 1px;
 +
  margin-left: 1px;
  
−
<h4> What should we do for our proof of concept? </h4>
+
}
−
<p>  
+
 
−
You can assemble a device from BioBricks and show it works. You could build some equipment if you're competing for the hardware award. You can create a working model of your software for the software award. Please note that this not an exhaustive list of activities you can do to fulfill the gold medal criterion. As always, your aim is to impress the judges!
+
.line {
 +
  position: absolute;
 +
  width:1px;
 +
  height:705px;
 +
  top: 13px;
 +
}
 +
.line .red {
 +
  width:1px;    /*調line長度*/
 +
  height:47%; /*line寬度*/
 +
  position:relative;
 +
 
 +
}
 +
 
 +
.line .blue {
 +
  width: 1px;  /*line寬度*/
 +
  height: 20%;  /*調line長度*/
 +
  position:relative;
 +
  left:51px;
 +
 
 +
}
 +
.line .red-container {
 +
  position:relative;
 +
  width: 4px;
 +
}
 +
.line .red {
 +
  background-color:#00D6FF;/*cover line color*/
 +
  *zoom: 1;
 +
  background-size: 100%;
 +
}
 +
.line .blue {
 +
  background-color: white;/*line color*/
 +
  *zoom: 1;
 +
  background-size: 100%;
 +
 +
}
 +
 
 +
.node {
 +
  margin-left: 40px;/*調node間距*/
 +
  width: 20px;
 +
  height: 20px;
 +
  margin-top: 30px;
 +
  position: relative;
 +
}
 +
.node .splash {
 +
  box-shadow: 0px 0px 8px 2px rgba(69, 174, 233, 0.53);
 +
  transform: translateZ(0px) scale(1);
 +
  position: absolute;
 +
  width: 20px;
 +
  height: 20px;
 +
  border-radius: 100%;
 +
  pointer-events: none;
 +
  opacity: 1;
 +
}
 +
.node.active .active-circle {
 +
  transform: scale(1);
 +
  opacity: 1;
 +
  background:white;/*active circle color*/
 +
  left:1.6px; 
 +
}
 +
.node.active .splash {
 +
  transition: transform 1200ms, opacity 1500ms;
 +
  transform: translateZ(0px) scale(2.5);
 +
  opacity: 0 !important;
 +
 
 +
}
 +
.node.active .inactive-circle {
 +
  transition: opacity 200ms;
 +
  opacity: 0;
 +
}
 +
.node .active-circle {
 +
  transition: all 300ms cubic-bezier(0.63, 0.62, 0.48, 1.84);
 +
  transform: scale(0.7);
 +
  position: absolute;
 +
  opacity: 0;
 +
  width: 20px;
 +
  height: 20px;
 +
  border-radius: 100%;
 +
  background-color: #4b1202;
 +
  *zoom: 1;
 +
  background-size: 100%;
 +
 
 +
}
 +
.node .active-circle .cover {
 +
  transform: translateZ(0px);
 +
  width: 16px;
 +
  height: 16px;
 +
  background:#00D6FF;/*active circle color */
 +
  border-radius: 100%;
 +
  position: absolute;
 +
  top: 2px;
 +
  left: 2px;
 +
}
 +
 
 +
.node .inactive-circle {
 +
  transition: all 300ms cubic-bezier(0.63, 0.62, 0.48, 1.84);
 +
  width: 14px;
 +
  height: 14px;
 +
  display: block;
 +
  background: #000;
 +
  position: absolute;
 +
  border-radius: 100%;
 +
  border: 2px solid white;
 +
  top: 3px;
 +
  left: 3px;
 +
}
 +
.node:hover {
 +
  cursor: pointer;
 +
}
 +
.node:hover .active-circle {
 +
  transition: all 200ms cubic-bezier(0.63, 0.62, 0.48, 1.84);
 +
  transform: scale(0.84);
 +
}
 +
 
 +
.node:hover .inactive-circle {
 +
  transition: all 200ms cubic-bezier(0.63, 0.62, 0.48, 1.84);
 +
  transform: scale(0.85);
 +
}
 +
 
 +
/*left-topic*/
 +
 
 +
.topic{
 +
    position:relative;
 +
    margin-top:0vh !important;
 +
    width:200px;
 +
    height:auto;
 +
    left:210px;
 +
    float:right;
 +
    color:#F3F7F7;
 +
}
 +
.text_color{
 +
    color:#F3F7F7;
 +
    font-size:12pt !important;
 +
}
 +
/*content*/
 +
.content_container{
 +
    position:relative;
 +
    left:6.5vw;
 +
    right:6.5vw;
 +
    margin:0 auto;
 +
    width:60vw;
 +
    height:auto;
 +
}
 +
.title{
 +
    font-size:25pt !important;
 +
    text-shadow:1px 1px 10px rgb(0, 206, 255);
 +
    border-left:3px solid rgb(0, 206, 255);
 +
    padding-left:10px !important;
 +
    color:rgb(0, 206, 255);
 +
    margin-top:20px;
 +
    margin-bottom:10px;
 +
}
 +
.content{
 +
    font-size:15pt !important;
 +
    text-align:justify;
 +
    text-indent:2em;
 +
    color:#F3F7F7;
 +
    padding-top:15px;
 +
    padding-bottom:15px;
 +
}
 +
/*second title*/
 +
.content-1{
 +
    font-size:19pt !important;
 +
    text-align:justify;
 +
    color:#F3F7F7;
 +
    font-weight: bold !important;
 +
    padding-top:30px;
 +
    padding-bottom:10px
 +
}
 +
 
 +
.content-image{
 +
    color:#F3F7F7 !important;
 +
    font-size:11pt !important;
 +
    padding-top:10px;
 +
    padding-bottom:50px;
 +
    width:50vw;
 +
    margin:auto;
 +
    padding-left:60px;
 +
}
 +
 
 +
.appear{
 +
    display:none;
 +
   
 +
}
 +
.list{
 +
    font-size:15pt !important;
 +
    text-align:justify;
 +
    color:#F3F7F7;
 +
}
 +
.quote{
 +
    font-size:17pt !important;
 +
    text-align:justify;
 +
    color:#F3F7F7;
 +
    text-indent:2em !important;
 +
   
 +
}
 +
 
 +
 
 +
/*image*/
 +
.web{
 +
    position:fixed !important;
 +
    left:0%;
 +
    bottom:0%;
 +
    display:block;
 +
    margin: auto;
 +
}
 +
.right{
 +
    position:fixed !important;
 +
    bottom:-15px;
 +
    right:0vw;
 +
    margin: auto;
 +
}
 +
 
 +
 
 +
 
 +
 
 +
.img-position{
 +
    position:absolute;
 +
    z-index:-1;
 +
}
 +
.box{
 +
    width:auto;
 +
    padding-top:20px;
 +
    padding-bottom:20px;
 +
}
 +
.picture{
 +
    position:relative;
 +
    left:8vw;
 +
    width:80%;
 +
    padding-bottom:10px;
 +
}
 +
 
 +
.picture-1{
 +
    position:relative;
 +
    left:17vw;
 +
    width:50%;
 +
    padding-bottom:10px;
 +
}
 +
 
 +
</style>
 +
</head>
 +
<body>
 +
<nav id="scroll">
 +
    <div class="wrapper">
 +
     
 +
  <div class="nodes">
 +
            <div class="line">
 +
                <div class="blue">
 +
                    <div class="red-container">
 +
                        <div class="red"></div>
 +
                    </div>
 +
                </div>
 +
          </div>
 +
 
 +
          <div class="node">
 +
          <div class="topic"><p class="text_color">Overview</p></div>
 +
            <div class="active-circle">
 +
              <div class="splash"></div>
 +
              <div class="cover">   
 +
              </div>
 +
            </div>
 +
            <div class="inactive-circle">
 +
              <div class="small-cover">
 +
              </div>
 +
            </div>
 +
          </div>
 +
 
 +
          <div class="node">
 +
          <div class="topic"><p class="text_color">Detector Design</p></div>
 +
            <div class="active-circle">
 +
              <div class="splash"></div>
 +
              <div class="cover">
 +
              </div>
 +
            </div>
 +
            <div class="inactive-circle">
 +
              <div class="small-cover">
 +
              </div>
 +
            </div>
 +
          </div>
 +
 
 +
          <div class="node">
 +
          <div class="topic"><p class="text_color">Controller Design</p></div>
 +
            <div class="active-circle">
 +
              <div class="splash"></div>
 +
              <div class="cover">
 +
 
 +
 
 +
              </div>
 +
            </div>
 +
            <div class="inactive-circle">
 +
              <div class="small-cover">
 +
              </div>
 +
            </div>
 +
          </div>
 +
 
 +
          <div class="node">
 +
          <div class="topic"><p class="text_color">#</p></div>
 +
            <div class="active-circle">
 +
              <div class="splash"></div>
 +
              <div class="cover">
 +
              </div>
 +
            </div>
 +
            <div class="inactive-circle">
 +
              <div class="small-cover">
 +
              </div>
 +
            </div>
 +
          </div>
 +
 
 +
         
 +
 
 +
 +
    </nav>
 +
 +
 
 +
 
 +
<!--圖片-->
 +
  <div class="img-container">
 +
        <img src="https://static.igem.org/mediawiki/2016/8/83/NCTU_device.png" class="main-img" width="100%">
 +
  </div>
 +
  <div>
 +
    <img src='https://static.igem.org/mediawiki/2016/f/f8/Web.png' class="web img-position" height="200px" id="web">
 +
  </div>
 +
  <div>
 +
    <img src="https://static.igem.org/mediawiki/2016/6/65/Right_%281%29.png" class="right img-position" id="right" height="600px">
 +
  </div>
 +
 
 +
 
 +
 
 +
<!---------------------wiki content--------------------->
 +
 
 +
 
 +
<section class="content_container">
 +
  <div>
 +
    <p class="title">Overview<p>
 +
    <p class="content"><i> “We are witnessing the dawn of a new era of Internet of Things. IoT will increase the ubiquity of the Internet by integrating every object for interaction via embedded systems, which leads to a highly distributed network of devices communicating with human beings as well as other devices.”</i></p>
 +
 
 +
    <p class="content" style="text-align:right">Feng Xia<br>
 +
Head, Department of Cyber School of Software, Dalian University of <br>
 +
Technology, China
 
</p>
 
</p>
  
−
</div>
+
    <p class="content">In modern times, technology has advanced at a surprising speed because of the internet. Since the Internet came into existence, its role has become indispensable in multiple fields. Therefore, integrating the device with the internet that can be used in the farmland is what we aim to achieve. </p>
  
 +
    <p class="content">We integrate the state-of-the-art technology into the farmland and subvert the public stereotype of the conventional agriculture. The device is an automatic system that has multiple functions including detection and elimination of the pests. In the device, it consists of three parts—the detector, the controller, and the clientele.</p>
 +
  </div>
  
  
 +
  <div>
 +
    <p class="title">Detector Design</p>
 +
 +
    <div>
 +
    <img src="##" class="picture">Detector 的圖
 +
    <p class="content-image" style="text-align:center">Figure 1.</p>
 +
    </div>
 +
 +
    <p class="content">First, inside the detector(Figure 1.), we utilize Pheromone Biosynthesis Activation Neuropeptide(PBAN) to attract specific species of pests into our device that will count the number of the species respectively. With the detector, we can know the situation remotely in the app we created. Second, the controller will then analyze the data from the detector to decide whether to spray the Pantide or not. Lastly, the client will receive the data of the real-time condition in the farmland.</p>
 +
 +
 
 +
 +
    <p class="content">Our detector contains several parts. The main part is to catch different kinds of pests and calculate the number of various pests, and a double layered box with an inverted pyramid inside it, and we used a 3D printer to make the entry channels. Inside the inverted pyramid, we separate the volume into four parts. Each part has one kind of PBAN to attract a specific species of pest. When an insect comes into the channel of the device, the infrared light will be cut off, and the signal will be sent to the Arduino chip which is in the IoT board linkit smart 7688 duo.  The above process allows the device to count the bugs inside each channel. The function helps the users know the population growth of pests in the farmland. Apart from getting hold of the pest population in the farmland, the users can also grasp various conditions in farmland with the detector. The detector is equipped with a hygrometer, a thermometer, a rain gauge, a UV sensor, a CO2 sensor, a soil moisture sensor, an illuminance sensor and a barometric pressure sensor to know whether the land is too dry or not. We optimize the value of the data above into the database, hoping that the users can take good care of their plants by utilizing the information in the database in the future. Moreover, we will also record the weather condition as a reference for the users.</p>
 +
 +
   
 +
  </div>
 +
 +
 +
  <div>
 +
    <p class="title">Controller Design</p>
 +
 +
    <div class="box">
 +
        <img src="https://static.igem.org/mediawiki/2016/d/dc/NCTU_Controller_Design.png" class="picture">
 +
        <p class="content-image" style="text-align:center !important;">Figure 2. </p>
 +
    </div>
 +
 +
 +
    <p class="content">The controller contains IoT board linkit smart 7688 duos, released by MediaTek, which has an MPU and an MCU ( in other words, a MediaTek chip and an Arduino chip). The MCU gets the data from the detector and sensors and sends to the MPU; then the MPU does a few computation and translates the data into the information we want. Subsequently, the Arduino sensors communicate with the server through WiFi, receiving the command from it and sending the information to the server. Also, the MPU will send the command to the MCU to tell it what it should do.</p>
 +
    <p class="content">The server is the most important part of the IoT system. It is the central to the device. Most of the computational work occurs on the server. Also, the server has an SQLite database that is used to save the information and the result of computation. In the past, building an IoT system required large knowledge and skills in programming, and once a device is connected to the system, it was difficult to change the slaver. This year, we used IoT talk, a system developed by the lab of Dr.Lin in National Chiao Tung University Taiwan. It is a system that makes the IoT contact easier and more convenient, even for the users not familiar with programming knowledge and background can easily utilize it; as it has simplified to the connected device below.</p>
 +
 +
 
 +
   
 +
    <div class="box">
 +
    <img src="https://static.igem.org/mediawiki/2016/8/82/NCTU_IoT.jpg" class="picture">
 +
    <p class="content-image" style="text-align:center !important;">Figure 3. </p> 
 +
    </div>
 +
   
 
</div>
 
</div>
 +
 
 +
  <div>
 +
    <p class="title">Clientele Design</p>
 +
    <p class="content">As for the clientele, we use the open source app released by MediaTek. Inside the app, we will have a panel to show us the various conditions of farm. By using the app, we can turn on or turn off the sprinklers at any time and anywhere as long as we have access to the internet.</p>
 +
 +
    <div>
 +
    <img src="" class="picture">
 +
    <p class="content-image"style="text-align:center !important;">Figure 4.</p>
 +
    </div>
 +
 +
    <p class="content">With the detector, we can know the situation without going to the farm. With the server, we can grow the plant without labors. With the clientele, we can still manage our farm remotely. With the combination of all the parts above, we make up our device. </p>
 +
  </div>
 +
 +
 +
</section>
 +
 +
 +
 +
<!--JS-->
 +
 +
<script>
 +
 +
var $document = $( document.body );
 +
var $revealBar = $( '.red-container' );
 +
var wrapperHeight = $document.height();
 +
var stepDistance = 101;
 +
var documentHeight = window.innerHeight;
 +
var positions = [];
 +
var heights = [];
 +
var elements = $( '.title' );
 +
 +
// Cache heights and positions
 +
for( var i = 0; i < elements.length; i++ ) {
 +
  var $element = $(elements[i]);
 +
  var height = $element.offset().top + documentHeight;
 +
  if (height > wrapperHeight) {
 +
    height = wrapperHeight;
 +
  }
 +
  positions.push(height);
 +
  heights.push($element.height());
 +
}
 +
 +
var $nodes =  $( '.node' );
 +
 +
// Should totally be debounced /w animation frame. I know,
 +
// this whole thing is slightly inefficient.
 +
// And magic numbers too!
 +
$( document ).scroll( function() {
 +
 +
  nodeTop = $document.scrollTop() + documentHeight + 1;
 +
  var current = 0;
 +
 
 +
  // Active/non active states
 +
  for( var i = 0; i < positions.length; i++ ) {
 +
    if(nodeTop >= positions[i]-70) {
 +
      current = i;
 +
      $nodes.eq( i ).addClass( 'active' );
 +
    } else {
 +
      $nodes.eq( i ).removeClass( 'active' );
 +
    }
 +
  }
 +
 
 +
 
 +
  if ( current < elements.length ) {
 +
    var nextStep = (nodeTop - positions[current]) / (positions[current + 1] - positions[current]);
 +
    var totalWidth = ( current * stepDistance ) + (nextStep * stepDistance);
 +
$revealBar.height( totalWidth+10 );
 +
  }
 +
 +
})
 +
 +
// Clicking the nodes... again, nothing special ;)
 +
$nodes.each( function( index ) {
 +
  var $node = $( this );
 +
  $node.click( function() {
 +
    $('html, body').animate({ scrollTop: (positions[ index ] - documentHeight)-70}, 1000 );
 +
  });
 +
})
 +
//scroll_relocate
 +
function sticky_relocate() {
 +
    var window_top = $(window).scrollTop();
 +
    var div_top = $('.main-img').offset().top;;
 +
    if (window_top > div_top+500) {
 +
        $('#scroll').removeClass('appear');
 +
    } else {
 +
        $('#scroll').addClass('appear');
 +
    };
 +
    if(window_top > div_top+420) {
 +
        $('#web').fadeIn(200);
 +
        $('#right').fadeIn(200);
 +
    } else {
 +
        $('#web').fadeOut(200);
 +
        $('#right').fadeOut(200);
 +
    }
 +
}
 +
 +
$(function () {
 +
    $(window).scroll(sticky_relocate);
 +
    sticky_relocate();
 +
});
 +
 +
 +
 +
$(document).ready(function(
 +
 +
){})
 +
  
 +
</script>
 +
</body>
 
</html>
 
</html>
 +
{{Team:NCTU_Formosa/footer}}

Revision as of 12:40, 13 October 2016

Overview

“We are witnessing the dawn of a new era of Internet of Things. IoT will increase the ubiquity of the Internet by integrating every object for interaction via embedded systems, which leads to a highly distributed network of devices communicating with human beings as well as other devices.”

Feng Xia
Head, Department of Cyber School of Software, Dalian University of
Technology, China

In modern times, technology has advanced at a surprising speed because of the internet. Since the Internet came into existence, its role has become indispensable in multiple fields. Therefore, integrating the device with the internet that can be used in the farmland is what we aim to achieve.

We integrate the state-of-the-art technology into the farmland and subvert the public stereotype of the conventional agriculture. The device is an automatic system that has multiple functions including detection and elimination of the pests. In the device, it consists of three parts—the detector, the controller, and the clientele.

Detector Design

Detector 的圖

Figure 1.

First, inside the detector(Figure 1.), we utilize Pheromone Biosynthesis Activation Neuropeptide(PBAN) to attract specific species of pests into our device that will count the number of the species respectively. With the detector, we can know the situation remotely in the app we created. Second, the controller will then analyze the data from the detector to decide whether to spray the Pantide or not. Lastly, the client will receive the data of the real-time condition in the farmland.

Our detector contains several parts. The main part is to catch different kinds of pests and calculate the number of various pests, and a double layered box with an inverted pyramid inside it, and we used a 3D printer to make the entry channels. Inside the inverted pyramid, we separate the volume into four parts. Each part has one kind of PBAN to attract a specific species of pest. When an insect comes into the channel of the device, the infrared light will be cut off, and the signal will be sent to the Arduino chip which is in the IoT board linkit smart 7688 duo. The above process allows the device to count the bugs inside each channel. The function helps the users know the population growth of pests in the farmland. Apart from getting hold of the pest population in the farmland, the users can also grasp various conditions in farmland with the detector. The detector is equipped with a hygrometer, a thermometer, a rain gauge, a UV sensor, a CO2 sensor, a soil moisture sensor, an illuminance sensor and a barometric pressure sensor to know whether the land is too dry or not. We optimize the value of the data above into the database, hoping that the users can take good care of their plants by utilizing the information in the database in the future. Moreover, we will also record the weather condition as a reference for the users.

Controller Design

Figure 2.

The controller contains IoT board linkit smart 7688 duos, released by MediaTek, which has an MPU and an MCU ( in other words, a MediaTek chip and an Arduino chip). The MCU gets the data from the detector and sensors and sends to the MPU; then the MPU does a few computation and translates the data into the information we want. Subsequently, the Arduino sensors communicate with the server through WiFi, receiving the command from it and sending the information to the server. Also, the MPU will send the command to the MCU to tell it what it should do.

The server is the most important part of the IoT system. It is the central to the device. Most of the computational work occurs on the server. Also, the server has an SQLite database that is used to save the information and the result of computation. In the past, building an IoT system required large knowledge and skills in programming, and once a device is connected to the system, it was difficult to change the slaver. This year, we used IoT talk, a system developed by the lab of Dr.Lin in National Chiao Tung University Taiwan. It is a system that makes the IoT contact easier and more convenient, even for the users not familiar with programming knowledge and background can easily utilize it; as it has simplified to the connected device below.

Figure 3.

Clientele Design

As for the clientele, we use the open source app released by MediaTek. Inside the app, we will have a panel to show us the various conditions of farm. By using the app, we can turn on or turn off the sprinklers at any time and anywhere as long as we have access to the internet.

Figure 4.

With the detector, we can know the situation without going to the farm. With the server, we can grow the plant without labors. With the clientele, we can still manage our farm remotely. With the combination of all the parts above, we make up our device.