(89 intermediate revisions by 9 users not shown) | |||
Line 85: | Line 85: | ||
width: auto; | width: auto; | ||
z-index: 9999; | z-index: 9999; | ||
− | top: | + | top:11%; |
margin: auto; | margin: auto; | ||
} | } | ||
Line 110: | Line 110: | ||
.line .red { | .line .red { | ||
width:1px; /*調line長度*/ | width:1px; /*調line長度*/ | ||
− | height: | + | height:52%; /*line寬度*/ |
position:relative; | position:relative; | ||
Line 117: | Line 117: | ||
.line .blue { | .line .blue { | ||
width: 1px; /*line寬度*/ | width: 1px; /*line寬度*/ | ||
− | height: | + | height: 43%; /*調line長度*/ |
position:relative; | position:relative; | ||
left:51px; | left:51px; | ||
Line 253: | Line 253: | ||
margin-top:20px; | margin-top:20px; | ||
margin-bottom:10px; | margin-bottom:10px; | ||
+ | font-weight:400 ; | ||
} | } | ||
.content{ | .content{ | ||
Line 334: | Line 335: | ||
width:80%; | width:80%; | ||
padding-bottom:10px; | padding-bottom:10px; | ||
+ | padding-left:5px; | ||
} | } | ||
Line 342: | Line 344: | ||
padding-bottom:10px; | padding-bottom:10px; | ||
} | } | ||
− | + | .picture-2{ | |
+ | position:relative; | ||
+ | left:2vw; | ||
+ | width:80%; | ||
+ | padding-bottom:10px; | ||
+ | padding-left:5px; | ||
+ | } | ||
+ | .animate-box{ | ||
+ | margin-left:9vw !important; | ||
+ | width:50%; | ||
+ | } | ||
</style> | </style> | ||
</head> | </head> | ||
Line 358: | Line 370: | ||
</div> | </div> | ||
− | <div class="node"> | + | <div class="node" id="node1"> |
− | <div class="topic"><p class="text_color">Overview</p></div> | + | <div class="topic"><p class="text_color"><a href="#titleA" style="text-decoration:none;color:#F3F7F7;">Overview</a></p></div> |
<div class="active-circle"> | <div class="active-circle"> | ||
<div class="splash"></div> | <div class="splash"></div> | ||
Line 371: | Line 383: | ||
</div> | </div> | ||
− | <div class="node"> | + | <div class="node" id="node2"> |
− | <div class="topic"><p class="text_color">Detector Design</p></div> | + | <div class="topic"><p class="text_color"><a href="#titleB" style="text-decoration:none;color:#F3F7F7;">Detector Design</a></p></div> |
<div class="active-circle"> | <div class="active-circle"> | ||
<div class="splash"></div> | <div class="splash"></div> | ||
Line 384: | Line 396: | ||
</div> | </div> | ||
− | <div class="node"> | + | <div class="node" id="node3"> |
− | <div class="topic"><p class="text_color">Controller Design</p></div> | + | <div class="topic"><p class="text_color"><a href="#titleC" style="text-decoration:none;color:#F3F7F7;">Controller Design</a></p></div> |
<div class="active-circle"> | <div class="active-circle"> | ||
<div class="splash"></div> | <div class="splash"></div> | ||
Line 400: | Line 412: | ||
− | <div class="node"> | + | <div class="node" id="node4"> |
− | <div class="topic"><p class="text_color">Clientele Design</p></div> | + | <div class="topic"><p class="text_color"><a href="#titleD" style="text-decoration:none;color:#F3F7F7;">Clientele Design</a></p></div> |
<div class="active-circle"> | <div class="active-circle"> | ||
<div class="splash"></div> | <div class="splash"></div> | ||
Line 414: | Line 426: | ||
− | <div class="node"> | + | <div class="node" id="node5"> |
− | <div class="topic"><p class="text_color">Hardware</p></div> | + | <div class="topic"><p class="text_color"><a href="#titleE" style="text-decoration:none;color:#F3F7F7;">Hardware</a></p></div> |
<div class="active-circle"> | <div class="active-circle"> | ||
<div class="splash"></div> | <div class="splash"></div> | ||
Line 427: | Line 439: | ||
</div> | </div> | ||
− | + | ||
+ | <div class="node" id="node6"> | ||
+ | <div class="topic"><p class="text_color"><a href="#titleF" style="text-decoration:none;color:#F3F7F7;">IoT System</a></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" id="node7"> | ||
+ | <div class="topic"><p class="text_color"><a href="#titleG" style="text-decoration:none;color:#F3F7F7;">Device Demo</a></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> | ||
Line 436: | Line 474: | ||
<!--圖片--> | <!--圖片--> | ||
<div class="img-container"> | <div class="img-container"> | ||
− | <img src="https://static.igem.org/mediawiki/2016/ | + | <img src="https://static.igem.org/mediawiki/2016/1/1b/NCTU_Formosa_device.png" class="main-img" width="100%"> |
</div> | </div> | ||
<div> | <div> | ||
Line 452: | Line 490: | ||
<section class="content_container"> | <section class="content_container"> | ||
<div> | <div> | ||
− | <p class="title">Overview<p> | + | <p class="title" id="titleA">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"><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> | ||
Line 462: | Line 500: | ||
<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">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 | + | <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> | ||
<div> | <div> | ||
− | <p class="title">Detector Design</p> | + | <p class="title" id="titleB">Detector Design</p> |
− | + | <div> | |
− | + | <img src="https://static.igem.org/mediawiki/2016/8/8a/NCTU_DIV1.JPG" class="picture"> | |
− | < | + | </div> |
+ | |||
+ | <div> | ||
+ | <img src="https://static.igem.org/mediawiki/2016/f/fe/NCTU_ANIMATE_DEVICE2.gif" class="picture"> | ||
</div> | </div> | ||
− | <p class="content">First, inside the detector | + | |
+ | <p class="content">First, inside the detector, 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 | + | <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 put PBAN to attract the 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 CO<sub>2</sub> sensor, a soil moisture sensor, an illuminance sensor and a barometric pressure sensor to know the situation in the farmland. 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> | ||
+ | <img src="https://static.igem.org/mediawiki/2016/3/35/NCTU_detector.jpg" class="picture-1"> | ||
+ | </div> | ||
</div> | </div> | ||
Line 485: | Line 530: | ||
<div> | <div> | ||
− | <p class="title">Controller Design</p> | + | <p class="title" id="titleC">Controller Design</p> |
<div > | <div > | ||
<img src="https://static.igem.org/mediawiki/2016/d/dc/NCTU_Controller_Design.png" class="picture"> | <img src="https://static.igem.org/mediawiki/2016/d/dc/NCTU_Controller_Design.png" class="picture"> | ||
− | + | ||
</div> | </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 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 | + | <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 slave. 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> |
Line 500: | Line 545: | ||
<div class="box"> | <div class="box"> | ||
<img src="https://static.igem.org/mediawiki/2016/8/82/NCTU_IoT.jpg" class="picture"> | <img src="https://static.igem.org/mediawiki/2016/8/82/NCTU_IoT.jpg" class="picture"> | ||
− | <p class="content-image" style="text-align: | + | <p class="content-image" style="text-align:justify !important;"> Here is a picture of how IoT talk system looks like, at left hand side is where the device upload the data to, and then through the line and node in the middle, we can easy connect the data to everywhere we want, then at the right hand side is where the data goes, after being processed in the node. We can use it control some other device or send to the client to show the data. The windows on the right is the monitor so that we can know what data being upload to the IoT talk system and what value goes down.</p> |
</div> | </div> | ||
Line 506: | Line 551: | ||
<div> | <div> | ||
− | <p class="title">Clientele Design</p> | + | <p class="title" id="titleD">Clientele Design</p> |
− | <p class="content">As for the clientele, we use | + | <p class="content">As for the clientele, we use MediaTek Cloud Sandbox, an 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> | <div> | ||
− | <img src="" class="picture"> | + | <img src="https://static.igem.org/mediawiki/2016/4/4e/NCTU_APP1.png" class="picture" style="width:25%"> |
− | < | + | <img src="https://static.igem.org/mediawiki/2016/5/53/NCTU_APP3.png" class="picture" style="width:25%"> |
+ | <img src="https://static.igem.org/mediawiki/2016/0/02/NCTU_APP2.png" class="picture" style="width:25%"> | ||
</div> | </div> | ||
Line 518: | Line 564: | ||
<div> | <div> | ||
− | <p class="title">Hardware</p> | + | <p class="title" id="titleE">Hardware</p> |
<p class="content">In the hardware, we designed an insect box, which had separated into four sections—the outside shell, the pest channels, the blue light LEDs and a PBAN container.</p> | <p class="content">In the hardware, we designed an insect box, which had separated into four sections—the outside shell, the pest channels, the blue light LEDs and a PBAN container.</p> | ||
− | + | <div> | |
+ | <img src="https://static.igem.org/mediawiki/2016/2/2e/NCTU_ANIMATE_DEVICE1.gif" class="picture" style="width:60%;height:700px;margin-left:5vw;"> | ||
+ | </div> | ||
<ul style="list-style-image:none;list-style-type:decimal;"> | <ul style="list-style-image:none;list-style-type:decimal;"> | ||
− | + | <li class="list">Outside Shell: | |
<br> The outside shell is a cube cover of our hardware which has four holes for moths entry. It also protects the whole hardware from destroying.</li> | <br> The outside shell is a cube cover of our hardware which has four holes for moths entry. It also protects the whole hardware from destroying.</li> | ||
+ | <div> | ||
+ | <img src="https://static.igem.org/mediawiki/2016/3/3b/NCTU_shell.JPG" class="picture" style="width:30%;padding-left:5vw;"> | ||
+ | <img src="https://static.igem.org/mediawiki/2016/e/ec/NCTU_Mshell.gif" class="picture" style="width:30%;padding-left:20px !important;"> | ||
+ | </div> | ||
+ | |||
<li class="list">Pest Channels: | <li class="list">Pest Channels: | ||
<br> There are four pest channels printed by 3D printer inside the device; We set the infrared LEDs and infrared receivers in them to count the number of moths. There are two layers of infrared receivers let moth cut off two of the infrared light to make sure that the count of moths enter the insect box is accurate. </li> | <br> There are four pest channels printed by 3D printer inside the device; We set the infrared LEDs and infrared receivers in them to count the number of moths. There are two layers of infrared receivers let moth cut off two of the infrared light to make sure that the count of moths enter the insect box is accurate. </li> | ||
+ | <div> | ||
+ | <img src="https://static.igem.org/mediawiki/2016/c/cb/NCTU_CHE1.jpg" class="picture-2" style="width:30%"> | ||
+ | <img src="https://static.igem.org/mediawiki/2016/4/43/NCTU_CHE2.jpg" class="picture-2" style="width:30%"> | ||
+ | <img src="https://static.igem.org/mediawiki/2016/3/30/NCTU_Mps.gif" class="picture-2" style="width:30%"> | ||
+ | </div> | ||
<li class="list">Blue Light LEDs: | <li class="list">Blue Light LEDs: | ||
− | <br> According to the result of 2014 NCTU_Formosa, blue light has more attraction to | + | <br> According to the result of 2014 NCTU_Formosa, blue light has more attraction to Spodoptera Litura than other color light. Thus we use the hand-made blue light bar with a switch in another device to attraction moths.</li> |
+ | <div> | ||
+ | <img src="https://static.igem.org/mediawiki/2016/1/19/NCTU_LED1.jpg" class="picture" style="width:30%;margin-left:8vw;"> | ||
+ | |||
+ | </div> | ||
<li class="list">PBAN container: | <li class="list">PBAN container: | ||
− | <br> This year, our project adopts the concept of 2014 NCTU_Formosa, using PBAN to attract moth. In our hardware, there is an inverted pyramid that had two layers that contain PBAN. Moreover, we have improved the design of container into the shape of an inverted pyramid to trap the pests, so that the pests can fly into the pest collector easily but hard to exit.</li> | + | <br> This year, our project adopts the concept of 2014 NCTU_Formosa, using PBAN to attract moth. In our hardware, there is an inverted pyramid that had two layers that contain PBAN. Moreover, we have improved the design of container into the shape of an inverted pyramid to trap the pests, so that the pests can fly into the pest collector easily but hard to exit. We design the container to have multifunctions-it can set pheromone bait and PBAN simultaneously! The use method of PBAN container is dissolve the PBAN in to water, and pour it into the container between two acrylic sheets, and then fill the round hole with cotton let PBAN be sucked along the cotton, the pest can eat PBAN through the cotton, it also can prevent PBAN molded easily.</li> |
+ | <div> | ||
+ | <img src="https://static.igem.org/mediawiki/2016/2/2d/NCTU_PBAN1.jpg" class="picture" style="width:30%;margin-left:6vw;"> | ||
+ | <img src="https://static.igem.org/mediawiki/2016/e/e0/NCTU_MPC.gif" class="picture" style="width:30%"> | ||
+ | <p class="content-image">PBAN container can also set pheromone bait through the round hole, to achieve the purpose of multifunctions!</p> | ||
+ | </div> | ||
+ | <p class="content"> | ||
+ | The shape of PBAN container is inverted pyramid, we designed this shape for the reason that make the pest go into our trap easily but hard to escape out; this shape is easy to clean and dry-the water will drop down alone the pyramid wall. PBAN container is separated into 4 chambers to let the structure more stable and more easy to pick up. | ||
+ | </p> | ||
+ | <div style="margin:auto"> | ||
+ | <img src="https://static.igem.org/mediawiki/2016/3/31/NCTU_PBAN2.jpg" class="picture" style="width:40%;margin:auto;padding-left:9.5vw;"> | ||
+ | </div> | ||
+ | |||
+ | <li class="list">barrier: | ||
+ | <br> The barrier is put between the PBAN container and circuit in the pest trap, the main function of it is to protect the circuit from destroying by pest in the trap.</li> | ||
+ | <div> | ||
+ | <img src="https://static.igem.org/mediawiki/2016/c/c4/NCTU_MB.gif" class="picture" style="width:30%;margin-left:9.5vw;"> | ||
+ | </div> | ||
− | + | <li class="list">Arduino Mega, Linkit Smart 7688 Duo and sensors circuit: | |
+ | <br> It is the core of hardware in our IoT system, we used Arduino Mega and Linkit Smart 7688 Duo to compute and order the data from the seneors and WIFI. </li> | ||
+ | <div> | ||
+ | <img src="https://static.igem.org/mediawiki/2016/d/d8/NCTU_AR.jpg" class="picture" style="width:40%;margin-left:9.5vw;"> | ||
+ | </div> | ||
+ | |||
+ | |||
+ | <li class="list">pest trap: | ||
+ | <br> It is the space of pest container, when the pest go through the PBAN container, it will be trapped in here.</li> | ||
+ | <div> | ||
+ | <img src="https://static.igem.org/mediawiki/2016/b/b9/NCTU_Mpt.gif" class="picture" style="width:40%;margin-left:9.5vw;"> | ||
+ | </div> | ||
</ul> | </ul> | ||
+ | </div> | ||
+ | |||
+ | |||
+ | |||
+ | <div style="width:1px;height:60px;"id="IoT"> | ||
+ | </div> | ||
+ | |||
+ | <div> | ||
+ | <p class="title" id="titleF">IoT System</p> | ||
+ | <div> | ||
+ | <img src="https://static.igem.org/mediawiki/2016/d/d1/NCTU_IoTsys_device2.png" class="picture"> | ||
+ | </div> | ||
+ | <p class="content">We want to create a labor-free, ecofriendly brand new agriculture system to solve the problem of pesticide residues and the randomness of agriculture, to reach labor-free, we use IoTtalk, a powerful system, and Arduino to establish a smart agriculture system.</p> | ||
+ | <p class="content">In the system, we let our device connect to the WIFI, through WIFI, we can uploading our data from Arduino sensors, and the data will upload to the IoT talk cloud.When the data upload onto the cloud, it will sent into the app in real time; thus the user can know the conditions in their farm simultaneously. The cloud will create a database of farm environmental data, as the time goes, the farm conditions will become large enough, and according to it, we can use some methods like machine learning to predict the future conditions like pest number, and auto-control the spraying system to spray our Pantide or water more efficiently and accurately.(See more about the <a href="https://2016.igem.org/Team:NCTU_Formosa/Model#titleB" style="color:#44E287;">Pest Prediction System</a>)</p> | ||
+ | </div> | ||
+ | |||
+ | <div> | ||
+ | <p class="title" id="titleG">Device Demo</p> | ||
+ | <div class="animate-box"> | ||
+ | <div> | ||
+ | <video controls width="150%"> | ||
+ | <source src="https://static.igem.org/mediawiki/2016/0/08/NCTU_meow_devicedemo9.mp4" type="video/mp4"> | ||
+ | </video> | ||
+ | <p class="content-image" style="text-align:center !important;padding-left:0px !important;">See the device Arduino code on <a href="https://github.com/chengchingwen/iGEM" style="color:#44E287;text-align:center !important;">GitHub.</a></p> | ||
+ | </div> | ||
+ | </div> | ||
</div> | </div> | ||
</section> | </section> | ||
Line 593: | Line 709: | ||
// Clicking the nodes... again, nothing special ;) | // Clicking the nodes... again, nothing special ;) | ||
$nodes.each( function( index ) { | $nodes.each( function( index ) { | ||
− | var $ | + | var $node1 = $( '#node1' ); |
− | $ | + | $node1.click( function() { |
− | $('html, body').animate({ scrollTop: ( | + | $('html, body').animate({ scrollTop: $('#titleA').offset().top-70}, 1000 ); |
+ | }); | ||
+ | |||
+ | var $node2 = $( '#node2' ); | ||
+ | $node2.click( function() { | ||
+ | $('html, body').animate({ scrollTop: $('#titleB').offset().top-70}, 1000 ); | ||
+ | }); | ||
+ | |||
+ | var $node3 = $( '#node3' ); | ||
+ | $node3.click( function() { | ||
+ | $('html, body').animate({ scrollTop: $('#titleC').offset().top-70}, 1000 ); | ||
+ | }); | ||
+ | |||
+ | var $node4 = $( '#node4' ); | ||
+ | $node4.click( function() { | ||
+ | $('html, body').animate({ scrollTop: $('#titleD').offset().top-70}, 1000 ); | ||
+ | }); | ||
+ | |||
+ | var $node5 = $( '#node5' ); | ||
+ | $node5.click( function() { | ||
+ | $('html, body').animate({ scrollTop: $('#titleE').offset().top-70}, 1000 ); | ||
+ | }); | ||
+ | |||
+ | var $node6 = $( '#node6' ); | ||
+ | $node6.click( function() { | ||
+ | $('html, body').animate({ scrollTop: $('#titleF').offset().top-70}, 1000 ); | ||
+ | }); | ||
+ | |||
+ | var $node7 = $( '#node7' ); | ||
+ | $node7.click( function() { | ||
+ | $('html, body').animate({ scrollTop: $('#titleG').offset().top-70}, 1000 ); | ||
}); | }); | ||
}) | }) |
Latest revision as of 02:58, 4 November 2016