(36 intermediate revisions by 7 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 369: | 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 382: | 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 395: | 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 411: | 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 425: | 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 439: | Line 440: | ||
− | <div class="node"> | + | <div class="node" id="node6"> |
− | <div class="topic"><p class="text_color">IoT System</p></div> | + | <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="active-circle"> | ||
<div class="splash"></div> | <div class="splash"></div> | ||
Line 453: | Line 454: | ||
− | <div class="node"> | + | <div class="node" id="node7"> |
− | <div class="topic"><p class="text_color">Device Demo</p></div> | + | <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="active-circle"> | ||
<div class="splash"></div> | <div class="splash"></div> | ||
Line 473: | 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 489: | 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 504: | Line 505: | ||
<div> | <div> | ||
− | <p class="title">Detector Design</p> | + | <p class="title" id="titleB">Detector Design</p> |
<div> | <div> | ||
Line 515: | 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 | + | <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 529: | Line 530: | ||
<div> | <div> | ||
− | <p class="title">Controller Design</p> | + | <p class="title" id="titleC">Controller Design</p> |
<div > | <div > | ||
Line 544: | 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 550: | 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 563: | 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> | ||
Line 586: | 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%;margin-left: | + | <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 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> | + | <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:6vw;"> | <img src="https://static.igem.org/mediawiki/2016/2/2d/NCTU_PBAN1.jpg" class="picture" style="width:30%;margin-left:6vw;"> | ||
Line 606: | 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 624: | Line 624: | ||
</ul> | </ul> | ||
</div> | </div> | ||
+ | |||
+ | |||
+ | |||
+ | <div style="width:1px;height:60px;"id="IoT"> | ||
+ | </div> | ||
<div> | <div> | ||
− | <p class="title">IoT System</p> | + | <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> | ||
<div> | <div> | ||
− | <p class="title">Device Demo</p> | + | <p class="title" id="titleG">Device Demo</p> |
<div class="animate-box"> | <div class="animate-box"> | ||
<div> | <div> | ||
<video controls width="150%"> | <video controls width="150%"> | ||
− | <source src="https://static.igem.org/mediawiki/2016/ | + | <source src="https://static.igem.org/mediawiki/2016/0/08/NCTU_meow_devicedemo9.mp4" type="video/mp4"> |
</video> | </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> | ||
Line 698: | 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