(54 intermediate revisions by 8 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 349: | Line 350: | ||
padding-bottom:10px; | padding-bottom:10px; | ||
padding-left:5px; | padding-left:5px; | ||
+ | } | ||
+ | .animate-box{ | ||
+ | margin-left:9vw !important; | ||
+ | width:50%; | ||
} | } | ||
</style> | </style> | ||
Line 365: | 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 378: | 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 391: | 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 407: | 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 421: | 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 434: | 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 443: | 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 459: | 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 474: | Line 505: | ||
<div> | <div> | ||
− | <p class="title">Detector Design</p> | + | <p class="title" id="titleB">Detector Design</p> |
<div> | <div> | ||
Line 485: | Line 516: | ||
− | <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">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> | <div> | ||
<img src="https://static.igem.org/mediawiki/2016/3/35/NCTU_detector.jpg" class="picture-1"> | <img src="https://static.igem.org/mediawiki/2016/3/35/NCTU_detector.jpg" class="picture-1"> | ||
Line 499: | Line 530: | ||
<div> | <div> | ||
− | <p class="title">Controller Design</p> | + | <p class="title" id="titleC">Controller Design</p> |
<div > | <div > | ||
Line 507: | Line 538: | ||
− | <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 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> | <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 514: | 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:justify !important;"> Here is a picture of how | + | <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 520: | 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> | ||
Line 533: | 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> | <div> | ||
− | <img src="https://static.igem.org/mediawiki/2016/2/2e/NCTU_ANIMATE_DEVICE1.gif" class="picture" style="width:60%;height:700px;margin-left: | + | <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> | </div> | ||
<ul style="list-style-image:none;list-style-type:decimal;"> | <ul style="list-style-image:none;list-style-type:decimal;"> | ||
Line 542: | Line 573: | ||
<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> | <div> | ||
− | <img src="https://static.igem.org/mediawiki/2016/3/3b/NCTU_shell.JPG" class="picture" style="width:30%"> | + | <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: | + | <img src="https://static.igem.org/mediawiki/2016/e/ec/NCTU_Mshell.gif" class="picture" style="width:30%;padding-left:20px !important;"> |
</div> | </div> | ||
Line 556: | Line 587: | ||
<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> | <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> | <div> | ||
− | <img src="https://static.igem.org/mediawiki/2016/1/19/NCTU_LED1.jpg" class="picture" style="width:30%; | + | <img src="https://static.igem.org/mediawiki/2016/1/19/NCTU_LED1.jpg" class="picture" style="width:30%;margin-left:8vw;"> |
− | + | ||
</div> | </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. We design the container to have | + | <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> | <div> | ||
− | <img src="https://static.igem.org/mediawiki/2016/2/2d/NCTU_PBAN1.jpg" class="picture" style="width:30%;margin-left: | + | <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%"> | <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> | <p class="content-image">PBAN container can also set pheromone bait through the round hole, to achieve the purpose of multifunctions!</p> | ||
</div> | </div> | ||
<p class="content"> | <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 | + | 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> | </p> | ||
<div style="margin:auto"> | <div style="margin:auto"> | ||
− | <img src="https://static.igem.org/mediawiki/2016/3/31/NCTU_PBAN2.jpg" class="picture" style="width: | + | <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> | </div> | ||
Line 576: | Line 607: | ||
<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> | <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> | <div> | ||
− | + | <img src="https://static.igem.org/mediawiki/2016/c/c4/NCTU_MB.gif" class="picture" style="width:30%;margin-left:9.5vw;"> | |
− | <img src="https://static.igem.org/mediawiki/2016/c/c4/NCTU_MB.gif" class="picture" style="width:30%"> | + | |
</div> | </div> | ||
Line 583: | Line 613: | ||
<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> | <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> | <div> | ||
− | <img src="https://static.igem.org/mediawiki/2016/d/d8/NCTU_AR.jpg" class="picture" style="width: | + | <img src="https://static.igem.org/mediawiki/2016/d/d8/NCTU_AR.jpg" class="picture" style="width:40%;margin-left:9.5vw;"> |
</div> | </div> | ||
Line 590: | Line 620: | ||
<br> It is the space of pest container, when the pest go through the PBAN container, it will be trapped in here.</li> | <br> It is the space of pest container, when the pest go through the PBAN container, it will be trapped in here.</li> | ||
<div> | <div> | ||
− | <img src="https://static.igem.org/mediawiki/2016/b/b9/NCTU_Mpt.gif" class="picture" style="width: | + | <img src="https://static.igem.org/mediawiki/2016/b/b9/NCTU_Mpt.gif" class="picture" style="width:40%;margin-left:9.5vw;"> |
</div> | </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 653: | 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