Difference between revisions of "Team:NTHU Taiwan/Demonstrate"

Line 1: Line 1:
 +
{{:Team:NTHU_Taiwan/MenuBar}}
 
<html>
 
<html>
  
Line 6: Line 7:
 
#home_logo, #sideMenu { display:none; }
 
#home_logo, #sideMenu { display:none; }
 
#sideMenu, #top_title, .patrollink  {display:none;}
 
#sideMenu, #top_title, .patrollink  {display:none;}
        #content { width:100%; padding:0px;  margin-top:-7px; margin-left:0px;overflow-x: hidden;}
+
#content { width:100%; padding:0px;  margin-top:-7px; margin-left:0px;overflow-x: hidden;}
 
body {background-color:#f6f6e3;}
 
body {background-color:#f6f6e3;}
 
#bodyContent {background-color:#f6f6e3;}
 
#bodyContent {background-color:#f6f6e3;}
 
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
 
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
 
/**************************************************************** MENU ***************************************************************/
 
/* Wrapper for the menu */
 
 
.igem_2017_menu_wrapper {
 
border-bottom: 3px solid #c2dac0;
 
background-color:#f6f6e3;
 
font-family:'Open Sans', sans-serif;
 
overflow: hidden;
 
}
 
 
.igem_2017_menu_wrapper a { 
 
float: left;
 
font-size: 1.2em;
 
color: #6c5070;
 
text-align: center;
 
padding: 25px 20px;
 
text-decoration: none;
 
}
 
 
.munu_img img{
 
position: fixed;
 
height: 9%;
 
}
 
 
/* this hides the scrollbar to keep view consistency */
 
.igem_2017_menu_wrappe::-webkit-scrollbar {
 
display: none;
 
}
 
 
.submenu_wrapper {
 
float: left;
 
  overflow: hidden;
 
}
 
 
.submenu_wrapper .menu_button {
 
letter-spacing: 1px;
 
text-transform: uppercase;
 
font-size: 1.2em;
 
border: none;
 
outline: none;
 
color: #6c5070;
 
padding: 25px 20px;
 
background-color: inherit;
 
}
 
 
.igem_2017_menu_wrapper a:hover, .submenu_wrapper:hover .menu_button {
 
color: #DF6A6A;
 
}
 
 
.submenu_button {
 
display: none;
 
position: absolute;
 
background-color: rgba(246, 246, 227, 0.7);
 
min-width: 160px;
 
z-index: 1;
 
}
 
 
.submenu_button a {
 
float: none;
 
color: #6c5070;
 
padding: 8px 16px;
 
text-decoration: none;
 
display: block;
 
text-align: left;
 
}
 
 
.submenu_button a:hover {
 
font-size: 1.3em;
 
 
}
 
 
.submenu_wrapper:hover .submenu_button {
 
display: block;
 
}
 
 
/*menu_wrapper left space*/
 
.igem_2017_menu_wrapper .menu_right_margin {
 
margin-left: 160px;
 
}
 
 
/*menu_wrapper right space*/
 
.igem_2017_menu_wrapper .menu_bottom_padding {
 
width: 100%;
 
height: 30px;
 
float:left;
 
}
 
 
/* styling for the menu button when it is the current page */
 
.current_page {
 
color:#df6a6a !important;
 
}
 
 
/* when the page size is bigger than 800px, this show/hide control is hidden by default */
 
.igem_2017_menu_wrapper #display_menu_control {
 
display:none;
 
text-align:center;
 
}
 
 
 
  
Line 136: Line 39:
  
 
.igem_2017_content_wrapper h1, .igem_2017_content_wrapper h2 .igem_2017_content_wrapper h3, .igem_2017_content_wrapper h4, .igem_2017_content_wrapper h5, .igem_2017_content_wrapper h6 {
 
.igem_2017_content_wrapper h1, .igem_2017_content_wrapper h2 .igem_2017_content_wrapper h3, .igem_2017_content_wrapper h4, .igem_2017_content_wrapper h5, .igem_2017_content_wrapper h6 {
padding: 40px 0px 15px 0px;  
+
padding: 50px 0px 15px 0px;  
 
border-bottom: 0px;  
 
border-bottom: 0px;  
 
color: #2C2C2C;
 
color: #2C2C2C;
Line 143: Line 46:
 
}
 
}
  
#pdf {
+
.igem_2017_content_wrapper .content {
 
width: 950px;
 
width: 950px;
height: 1200px;
 
 
margin: 2em auto;
 
margin: 2em auto;
padding-top: 20px;
 
 
}
 
}
  
#pdf object {
+
.igem_2017_content_wrapper .content p{
 +
color: #2C2C2C;
 +
font-size: 1.4em;
 +
line-height: 1.3em;
 +
padding: 0px 0px;
 +
text-align: justify;
 +
text-justify:inter-ideograph;
 +
}
 +
 
 +
.igem_2017_content_wrapper .content img{
 +
margin: auto;
 
display: block;
 
display: block;
border: solid 2px #2c2c2c;
+
float: center;
 +
padding: 20px 0px 30px 0px;
 
}
 
}
  
/***************************************************** RESPONSIVE STYLING ****************************************************/
+
.column .full_size {
 +
width: 100%;
 +
padding-top: 50px;
 +
}
  
/* IF THE SCREEN IS LESS THAN 1200PX */
+
/* class for a half width column */
@media only screen and (max-width: 1200px) {
+
.column .half_size {
 +
width: 50%;
 +
float: left;
 +
}
  
#content {width:100%; }
+
#pdf {
.igem_2017_menu_wrapper {width:100%; right:0;}
+
width: 950px;
.highlight {padding:10px 0px;}
+
height: 1200px;
.igem_2017_menu_wrapper #display_menu_control { display:none; }
+
margin: 2em auto;
#menu_content { display:block;}
+
padding-top: 20px;
.menu_button.direct_to_page {padding-left: 17px;}
+
+
 
}
 
}
  
/* IF THE SCREEN IS LESS THAN 800PX */
+
#pdf object {
@media only screen and (max-width: 800px) {
+
display: block;
 
+
border: solid 2px #2c2c2c;
.igem_2017_menu_wrapper { width:100%; height: 15%; position:relative; left:0%;}
+
.igem_2017_content_wrapper {width:100%; margin-left:0px;}
+
.column.half_size  {width:100%; }
+
.column.full_size img, .column.half_size img {  width: 100%; padding: 10px 0px;}
+
.highlight {padding:15px 5px;}
+
.igem_2017_menu_wrapper #display_menu_control { display:block; }
+
#menu_content { display:none;}
+
.igem_2017_menu_wrapper .menu_button .expand_collapse_icon { width: 5%; }
+
.menu_bottom_padding {display:none;}
+
.menu_button.direct_to_page { padding-left: 36px; }
+
 
}
 
}
 
 
</style>
 
</style>
  
Line 194: Line 99:
 
</head>
 
</head>
  
<!-- <div class="munu_img">
 
<a href="https://2017.igem.org/Team:NTHU_Taiwan">
 
<img src="https://static.igem.org/mediawiki/2017/1/1f/T--NTHU_Taiwan--HOME--logo.png">
 
</a>
 
</div> -->
 
 
<div class="igem_2017_menu_wrapper" >
 
<!-- this div is hidden by default and will only be displayed if the screen size is too small -->
 
<div class="menu_button" id="display_menu_control">
 
MENU 
 
</div>
 
 
 
<div id="menu_content">
 
<a href="https://2017.igem.org/Team:NTHU_Taiwan">
 
<div class="menu_button menu_right_margin">
 
HOME
 
</div>
 
</a>
 
 
<div class="submenu_wrapper">
 
<button class="menu_button">TEAM</button>
 
<div class="submenu_button">
 
<a href="https://2017.igem.org/Team:NTHU_Taiwan/Team">
 
<div id="Team_page">
 
Team
 
</div>
 
</a>
 
<a href="https://2017.igem.org/Team:NTHU_Taiwan/Attributions">
 
<div  id="Attributions_page">
 
Attributions
 
</div>
 
</a>
 
<a href="https://2017.igem.org/Team:NTHU_Taiwan/Collaborations">
 
<div  id="Collaborations_page">
 
Collaborations
 
</div>
 
</a>
 
</div>
 
</div>
 
 
<div class="submenu_wrapper">
 
<button class="menu_button">PROJECT</button>
 
<div class="submenu_button">
 
<a href="https://2017.igem.org/Team:NTHU_Taiwan/Description">
 
<div id="Description_page">
 
Description
 
</div>
 
</a>
 
<a href="https://2017.igem.org/Team:NTHU_Taiwan/Design">
 
<div  id="Design_page">
 
Design
 
</div>
 
</a>
 
<a href="https://2017.igem.org/Team:NTHU_Taiwan/Contribution">
 
<div  id="Contribution_page">
 
Contribution
 
</div>
 
</a>
 
<a href="https://2017.igem.org/Team:NTHU_Taiwan/Model">
 
<div  id="Model_page">
 
Model
 
</div>
 
</a>
 
<a href="https://2017.igem.org/Team:NTHU_Taiwan/Results">
 
<div  id="Results_page">
 
Results
 
</div>
 
</a>
 
<a href="https://2017.igem.org/Team:NTHU_Taiwan/Demonstrate">
 
<div  id="Demonstrate_page">
 
Demonstrate
 
</div>
 
</a>
 
 
</div>
 
</div>
 
 
<div class="submenu_wrapper">
 
<button class="menu_button">WET LAB</button>
 
<div class="submenu_button">
 
<a href="https://2017.igem.org/Team:NTHU_Taiwan/Experiments">
 
<div  id="Experiments_page">
 
Experiments
 
</div>
 
</a>
 
<a href="#">
 
<div  id="Protocol_page">
 
Protocol
 
</div>
 
</a>
 
<a href="https://2017.igem.org/Team:NTHU_Taiwan/Notebook">
 
<div  id="Notebook_page">
 
Notebook
 
</div>
 
</a>
 
<a href="https://2017.igem.org/Team:NTHU_Taiwan/InterLab">
 
<div  id="InterLab_page">
 
InterLab
 
</div>
 
</a>
 
</div>
 
</div>
 
 
<div class="submenu_wrapper">
 
<button class="menu_button">PARTS</button>
 
<div class="submenu_button">
 
<a href="https://2017.igem.org/Team:NTHU_Taiwan/Basic_Part">
 
<div  id="Basic_Part_page">
 
Basic Parts
 
</div>
 
</a>
 
<a href="https://2017.igem.org/Team:NTHU_Taiwan/Composite_Part">
 
<div  id="Composite_Part_page">
 
Composite Parts
 
</div>
 
</a>
 
<a href="https://2017.igem.org/Team:NTHU_Taiwan/Part_Collection">
 
<div  id="Part_Collection_page">
 
Part Collection
 
</div>
 
</a>
 
</div>
 
</div>
 
 
<a href="https://2017.igem.org/Team:NTHU_Taiwan/Safety">
 
<div class="menu_button">
 
SAFETY
 
</div>
 
</a>
 
 
<div class="submenu_wrapper">
 
<button class="menu_button">HUMAN PRACTICES</button>
 
<div class="submenu_button">
 
<a href="https://2017.igem.org/Team:NTHU_Taiwan/HP/Silver">
 
<div id="Silver_page">
 
Silver HP
 
</div>
 
</a>
 
<a href="https://2017.igem.org/Team:NTHU_Taiwan/HP/Gold_Integrated">
 
<div  id="Gold_Integrated_page">
 
Integrated and Gold
 
</div>
 
</a>
 
<a href="https://2017.igem.org/Team:NTHU_Taiwan/Engagement">
 
<div  id="Engagement_page">
 
Public Engagement
 
</div>
 
</a>
 
</div>
 
</div>
 
 
<div class="submenu_wrapper">
 
<button class="menu_button">AWARDS</button>
 
<div class="submenu_button">
 
<a href="https://2017.igem.org/Team:NTHU_Taiwan/Applied_Design">
 
<div id="Applied_Design_page">
 
Applied Design
 
</div>
 
</a>
 
<a href="https://2017.igem.org/Team:NTHU_Taiwan/Entrepreneurship">
 
<div  id="Entrepreneurship_page">
 
Integrated Human Practices
 
</div>
 
</a>
 
<a href="https://2017.igem.org/Team:NTHU_Taiwan/Hardware">
 
<div  id="Hardware_page">
 
Hardware
 
</div>
 
</a>
 
<a href="https://2017.igem.org/Team:NTHU_Taiwan/Model">
 
<div  id="Model_page">
 
Model
 
</div>
 
</a>
 
<a href="https://2017.igem.org/Team:NTHU_Taiwan/Software">
 
<div  id="Software_page">
 
Software
 
</div>
 
</a>
 
<a href="https://2017.igem.org/Team:NTHU_Taiwan/Criteria">
 
<div  id="Criteria_page">
 
Criteria
 
</div>
 
</a>
 
 
</div>
 
</div>
 
 
<a href="https://igem.org/2017_Judging_Form?team=NTHU_Taiwan">
 
<div class="menu_button">
 
JUDGING FORM
 
</div>
 
</a>
 
 
</div>
 
 
</div>
 
  
  
Line 397: Line 104:
 
<!-- start of content -->
 
<!-- start of content -->
 
<div class="igem_2017_content_wrapper">
 
<div class="igem_2017_content_wrapper">
<img width="25%" src="https://static.igem.org/mediawiki/2017/e/e2/T--NTHU_Taiwan--Notebook--Top.png">
 
 
<div style="text-align: center">
 
<div style="text-align: center">
 
<h1 style="color:#DF6A6A">Demonstrate
 
<h1 style="color:#DF6A6A">Demonstrate
Line 404: Line 110:
 
<hr width="20%" />
 
<hr width="20%" />
 
</div>
 
</div>
 +
<div class="content">
 +
<center><h1 style="color: #6c5070">The Smart EDC Farmland Protection System</h1></center>
  
<style>
 
p{
 
width:1000px;
 
font-size:20px;
 
text-align: justify;
 
text-justify:inter-ideograph;
 
line-height: 30px;
 
}
 
</style>
 
<body>
 
<center>
 
  
  
  
 +
<img width="50%" src="https://static.igem.org/mediawiki/2017/f/f0/T--NTHU_Taiwan--AppliedDesign--FarmlandComputerModel.png">
  
  
<h1 align="center">
 
The Smart EDC Farmland Protection System
 
</h1>
 
  
 +
<p>
 +
<center>
 +
<font size="2">
 +
Integrated system of endocrine disrupting chemicals (EDCs) water protection system.
 +
</font>
 +
</center>
 +
</p>
  
 +
<p>
 +
In order to solve some real environmental challenges, our team has proposed an integrated system that can both detect and degrade endocrine disrupting chemicals (EDCs) suitable for farmland water protection.
 +
</p>
  
<img width="50%" src="https://static.igem.org/mediawiki/2017/f/f0/T--NTHU_Taiwan--AppliedDesign--FarmlandComputerModel.png">
+
<p>
  
 +
When we started building this system, we aimed not only to solve a few farmers’ problems but on a bigger scale, agricultural and industrial, since in most of the developing countries, factories could be easily found in between farmland. On the left-hand side of the flowchart, we developed the system that could sense the concentration of the EDC in the water and control the valve to protect the farmland from polluted water. And on the right-hand side of the flowchart, we could collect such data, such as the concentration, time, and place. If the number of devices could grow to dozens or say hundreds, we would be able to tell where and when did the pollution came from.
 +
</font></p>
  
 +
<img width="50%" src="https://static.igem.org/mediawiki/2017/d/d9/T--NTHU_Taiwan--Applied_Design--System_Flow_Chart.png">
  
<p>
+
<p><center><font size="2">
<center>
+
System flow chart of our EDCs water protection sysetm.
<font size="2">
+
</font></center></p>
Integrated system of endocrine disrupting chemicals (EDCs) water protection system.
+
</font>
+
</center>
+
</p><br>
+
  
<p>
 
In order to solve some real environmental challenges, our team has proposed an integrated system that can both detect and degrade endocrine disrupting chemicals (EDCs) suitable for farmland water protection.
 
</p><br>
 
  
<p>
+
<video width="960" height="720" controls>
<font size=4>
+
<source src=" https://static.igem.org/mediawiki/2017/0/02/T--NTHU_Taiwan--Demonstrate--Model_Demo_Video.mp4" type="video/mp4"></video>
When we started building this system, we aimed not only to solve a few farmers’ problems but on a bigger scale, agricultural and industrial, since in most of the developing countries, factories could be easily found in between farmland. On the left-hand side of the flowchart, we developed the system that could sense the concentration of the EDC in the water and control the valve to protect the farmland from polluted water. And on the right-hand side of the flowchart, we could collect such data, such as the concentration, time, and place. If the number of devices could grow to dozens or say hundreds, we would be able to tell where and when did the pollution came from.
+
</font></p><br>
+
  
<img width="50%" src="https://static.igem.org/mediawiki/2017/d/d9/T--NTHU_Taiwan--Applied_Design--System_Flow_Chart.png">
 
  
<p><center><font size="2">
+
<p><center><font size="2">
System flow chart of our EDCs water protection sysetm.
+
Integrated System Demo Video
</font></center></p><br>
+
</font></center></p>
  
  
<video width="960" height="720" controls>
+
<p>
<source src=" https://static.igem.org/mediawiki/2017/0/02/T--NTHU_Taiwan--Demonstrate--Model_Demo_Video.mp4" type="video/mp4"></video>
+
First, in normal days, the gate will remain half open and let the water comes into the channel. When the water passes through the gate, it will then passes through the filter. Enzyme mixed with activated carbon is filled in the filter, which can help filter out most of our target endocrine disrupting chemicals. We have proved the capability of the enzyme and filter through modeling and experiment test. Then the water will encounter out fluorescent detection. We pump some water into the detector and mix them with the indicator paper which is coated with modified <I>E. coli</I>, and the EDCs in the water can be captured by our modified <I>E. coli</I>. The <I>E. coli</I> is later excited with laser light to produce fluorescent, the fluorescent signal will be collected and calculated into relative EDCs concentration.
 +
</p>
  
 +
<p>
 +
If the detected EDCs concentration is safe for the farmland to use, the microcontroller which is embedded in the detector will send a signal to the gate to tell it to remain open to let the water in. However, if the detected EDCs concentration is above the safety standard, a feedback signal will be sent to the gate and lower it to protect the farmland from further damage. The reading of the EDCs concentration will also be sent to our database and the App, which can allow the farmer or the farmland manager to remotely monitor the condition of the farmland.
 +
</p>
  
<p><center><font size="2">
 
Integrated System Demo Video
 
</font></center></p><br>
 
  
 +
<center><h2>IoT System and App</h2></center>
  
<p>
+
<p>
 +
With the implementation of our device, we now can provide farmers a water protection system. Furthermore, we have developed an app and IoT system. The app will allow the user to know the condition of the farmland water, and the IoT system is set to save all the data and collaborate with other nearby protection systems to build up a “safe web.” When our devices are widely spread around a region, we would not only be able to help the farmers keep their farmland’ water source safe, but even identify when and where the pollution came from.
 +
</p>
  
First, in normal days, the gate will remain half open and let the water comes into the channel. When the water passes through the gate, it will then passes through the filter. Enzyme mixed with activated carbon is filled in the filter, which can help filter out most of our target endocrine disrupting chemicals. We have proved the capability of the enzyme and filter through modeling and experiment test. Then the water will encounter out fluorescent detection. We pump some water into the detector and mix them with the indicator paper which is coated with modified <I>E. coli</I>, and the EDCs in the water can be captured by our modified <I>E. coli</I>. The <I>E. coli</I> is later excited with laser light to produce fluorescent, the fluorescent signal will be collected and calculated into relative EDCs concentration.
+
<center><h2>The IoT System</h2></center>
</p><br>
+
  
<p>
 
If the detected EDCs concentration is safe for the farmland to use, the microcontroller which is embedded in the detector will send a signal to the gate to tell it to remain open to let the water in. However, if the detected EDCs concentration is above the safety standard, a feedback signal will be sent to the gate and lower it to protect the farmland from further damage. The reading of the EDCs concentration will also be sent to our database and the App, which can allow the farmer or the farmland manager to remotely monitor the condition of the farmland.
 
</p><br>
 
  
 +
<h2>Why IoT?</h2>
  
<p>
+
<p>
<center>
+
In order to fulfill the purpose of data monitoring in real-time, we have to implement IoT system to our device. The implementation can be simply classified in the following steps:
<font size=4>
+
</p>
<b>
+
IoT System and App
+
</b>
+
</font>
+
</center>
+
</p><br>
+
  
 +
<p>
 +
1. Sensors (temperature, PH detector) collect data to our controller.
 +
</p>
  
<p>
+
<p>
With the implementation of our device, we now can provide farmers a water protection system. Furthermore, we have developed an app and IoT system. The app will allow the user to know the condition of the farmland water, and the IoT system is set to save all the data and collaborate with other nearby protection systems to build up a “safe web.” When our devices are widely spread around a region, we would not only be able to help the farmers keep their farmland’ water source safe, but even identify when and where the pollution came from.
+
2. Controller upload data to cloud through wifi.
</p><br>
+
</p>
  
<p>
+
<h2>What have been used?</h2>
<center>
+
<font size=4>
+
<b>
+
The IoT System
+
</b>
+
</font>
+
</center>
+
</p><br>
+
  
 +
<h2>Cloud Platform : MediaTek Cloud Sandbox</h2>
  
<p>
+
<p>
<b>
+
We created an account on MediaTek Cloud Sandbox, therefore, our data will be going there.
Why IoT?
+
</p>
</b>
+
</p><br>
+
  
<p>
+
<p>
In order to fulfill the purpose of data monitoring in real-time, we have to implement IoT system to our device. The implementation can be simply classified in the following steps:
+
After establishing an MCS account, we start to create our virtual device and data channel. When data channel is being created, they will have their own Device ID and Device Key. So, when writing our Arduino code and assign them with specific Device ID and Device Key, our data will be able to send to that data channel.
</p><br>
+
</p>
  
<p>
+
<h2>Controller and Sensors</h2>
1. Sensors (temperature, PH detector) collect data to our controller.
+
</p><br>
+
  
<p>
+
<p>
2. Controller upload data to cloud through wifi.
+
The controller is the heart of our device, where it is responsible for receiving, processing, uploading data to the cloud, and also control our motor.  
</p><br>
+
</p>
  
<p>
 
<b>
 
What have been used?
 
</b>
 
</p><br>
 
  
<p>
+
<p>
<b>
+
The reason why we choose MediaTek LinkIt™ ONE as our controller mainly because it has its own cloud platform MediaTek Cloud Sandbox, which enable us to implement IoT system to our device much easier. As for the sensors, right now we have used a thermometer and pH meter. Fluorescence detector will be added to the system once biochip has been successfully manufactured.
Cloud Platform : MediaTek Cloud Sandbox
+
</p>
</b>
+
</p><br>
+
  
<p>
+
<h2>How we do this?</h2>
We created an account on MediaTek Cloud Sandbox, therefore, our data will be going there.
+
</p><br>
+
  
<p>
+
<h2>Step 1:  Sensors collect data to our controller</h2>
After establishing an MCS account, we start to create our virtual device and data channel. When data channel is being created, they will have their own Device ID and Device Key. So, when writing our Arduino code and assign them with specific Device ID and Device Key, our data will be able to send to that data channel.
+
</p><br>
+
  
<p>
+
<p>
<b>
+
This part is relatively simple, based on the sensors we use, we search for the corresponding code on the Internet, and copy them into our Arduino code (Figure 1). Once we have the code and correct PIN connected to our sensors, then we are good to go.
Controller and Sensors
+
</p>
</b>
+
</p><br>
+
  
<p><font size=4>
 
The controller is the heart of our device, where it is responsible for receiving, processing, uploading data to the cloud, and also control our motor.
 
</font></p><br>
 
  
 +
<p>
 +
<img width="50%" src="https://static.igem.org/mediawiki/2017/6/60/T--NTHU_Taiwan--Applied_Design--IoT_step1_code.png">
 +
</p>
  
<p><font size=4>
+
<p><center><font size="2">
The reason why we choose MediaTek LinkIt™ ONE as our controller mainly because it has its own cloud platform MediaTek Cloud Sandbox, which enable us to implement IoT system to our device much easier. As for the sensors, right now we have used a thermometer and pH meter. Fluorescence detector will be added to the system once biochip has been successfully manufactured.
+
Figure 1
</font></p><br>
+
</font></center></p>
  
<p><font size=4>
 
<b>
 
How we do this?
 
</b>
 
</font></p><br>
 
  
<p><font size=4>
+
<h2>Step 2: Controller upload data to cloud through wifi</h2>
<b>
+
Step 1: Sensors collect data to our controller
+
</b>
+
</font></p><br>
+
  
<p><font size=4>
+
<p>
This part is relatively simple, based on the sensors we use, we search for the corresponding code on the Internet, and copy them into our Arduino code (Figure 1). Once we have the code and correct PIN connected to our sensors, then we are good to go.
+
Remember the Device ID and Device Key that we mentioned before? In this part, we are going to use it. The function of them works like the address, when we assign specific Device ID and Device Key inside our code (Figure 2), our data can be correctly sent to the corresponding data channel.
</font></p><br>
+
</p>
  
 +
<p>
 +
<img width="50%" src="https://static.igem.org/mediawiki/2017/1/1a/T--NTHU_Taiwan--Applied_design--IoT_step2_code.png">
 +
</p>
  
<p>
 
<img width="50%" src="https://static.igem.org/mediawiki/2017/6/60/T--NTHU_Taiwan--Applied_Design--IoT_step1_code.png">
 
</p><br>
 
  
<p>
+
<p><center><font size="2">
<center>
+
Figure 2
<font size="2">
+
</font></center></p>
Figure 1
+
</font>
+
</center>
+
</p><br>
+
  
  
<p><font size=4>
+
<video width="960" height="720" controls>
<b>
+
<source src="https://static.igem.org/mediawiki/2017/3/33/T--NTHU_Taiwan--test.mp4" type="video/mp4">
Step 2: Controller upload data to cloud through wifi
+
</video>
</b>
+
</font></p><br>
+
  
<p><font size=4>
+
<p><center><font size="2">
Remember the Device ID and Device Key that we mentioned before? In this part, we are going to use it. The function of them works like the address, when we assign specific Device ID and Device Key inside our code (Figure 2), our data can be correctly sent to the corresponding data channel.
+
IoT Demo Video
</font></p><br>
+
</font></center></p>
  
<p>
 
<img width="50%" src="https://static.igem.org/mediawiki/2017/1/1a/T--NTHU_Taiwan--Applied_design--IoT_step2_code.png">
 
</p><br>
 
  
 +
<h2>The App Design</h2>
  
<p>
+
<h2>Why we built this APP?</h2>
<center>
+
<font size="2">
+
Figure 2
+
</font>
+
</center>
+
</p><br>
+
  
 +
<p>
 +
The purpose of building this APP is that we hope to monitor values from our detection point in real-time.Furthermore, if we have multiple detection points in the future, we can label all data with different colors of markers according to their concentrations, and show them on the google map. Therefore, we can get regional concentrations at once, which enable us to identify sources of pollution with ease.
 +
</p>
  
<video width="960" height="720" controls>
+
<h2>
<source src="https://static.igem.org/mediawiki/2017/3/33/T--NTHU_Taiwan--test.mp4" type="video/mp4">
+
How do we build our APP?
</video>
+
</h2>
  
<p>
+
<p>
<center>
+
The software we use is Android Studio. And we manage to represent our detection data in the following ways:
<font size="2">
+
</p>
IoT Demo Video
+
</font>
+
</center>
+
</p><br>
+
  
 +
<p>
 +
Tab1: Real-time detection value from a single detection point.
 +
</p>
  
<p align="center">
+
<p>
<font size=4>
+
Tab2: Historical monitoring data from a single detection point.
<b>
+
</p>
The App Design
+
</font>
+
</b>
+
</p><br>
+
  
<p><font size=4>
+
<p>
<b>
+
Tab3: The distribution of all detection points and their visualized EDC concentrations.
Why we built this APP?
+
</p>
</b>
+
</font></p><br>
+
  
<p><font size=4>
+
<p>
The purpose of building this APP is that we hope to monitor values from our detection point in real-time.Furthermore, if we have multiple detection points in the future, we can label all data with different colors of markers according to their concentrations, and show them on the google map. Therefore, we can get regional concentrations at once, which enable us to identify sources of pollution with ease.
+
Since our detection system has implemented Internet of Things (IoT), therefore, all data being detected will be stored to our cloud in JSON format (For details, please refer to DEVICE / Software – IoT page). So if we want to retrieve those data from our cloud, what we have to do can be simplified as followings:
</font></p><br>
+
</p>
  
<p><font size=4>
+
<p>
<b>
+
1. Get JSON file from server.
How do we build our APP?
+
</p>
</b>
+
</font></p><br>
+
  
<p><font size=4>
+
<p>
The software we use is Android Studio. And we manage to represent our detection data in the following ways:
+
2. Parse JSON to retrieve specific data.
</font></p><br>
+
</p>
  
<p><font size=4>
+
<p>
Tab1: Real-time detection value from a single detection point.
+
3. Display.
</font></p><br>
+
</p>
  
<p><font size=4>
+
<p>
Tab2: Historical monitoring data from a single detection point.
+
Now we will go through those steps one by one :  
</font></p><br>
+
</p>
  
<p><font size=4>
+
<p>
Tab3: The distribution of all detection points and their visualized EDC concentrations.
+
1. Get JSON file from server
</font></p><br>
+
</p>
  
<p><font size=4>
+
<p>
Since our detection system has implemented Internet of Things (IoT), therefore, all data being detected will be stored to our cloud in JSON format (For details, please refer to DEVICE / Software – IoT page). So if we want to retrieve those data from our cloud, what we have to do can be simplified as followings:
+
Data is uploaded to our cloud were stored in JSON format (Figure 1), and data being uploaded by different sensors have their own unique URL. So, in our code, by searching the specific URL (Figure 2), we can get the information we need.
</font></p><br>
+
</p>
  
<p><font size=4>
+
<p>
1. Get JSON file from server.
+
(Notice: Since our EDC sensor has not been made yet, so here we use the value detected by ultrasound for replacement. However, our detector’s mechanical design proposal and the software parts are ready.)
</font></p><br>
+
</p>
  
<p><font size=4>
+
<p>
2. Parse JSON to retrieve specific data.
+
<img width="50%" src="https://static.igem.org/mediawiki/2017/f/f3/T--NTHU_Taiwan--Applied_Design--App_Design_Code1.png">
</font></p><br>
+
</p>
  
<p><font size=4>
+
<p><center><font size="2">
3. Display.
+
Figure 1
</font></p><br>
+
</font></center></p>
  
<p><font size=4>
 
Now we will go through those steps one by one :
 
</font></p><br>
 
  
<p><font size=4>
+
<p>
1. Get JSON file from server
+
<img width="50%" src="https://static.igem.org/mediawiki/2017/e/e3/T--NTHU_Taiwan--Applied_Design--App_Design_Code2.png">
</font></p><br>
+
</p>
  
<p><font size=4>
+
<p><center><font size="2">
Data is uploaded to our cloud were stored in JSON format (Figure 1), and data being uploaded by different sensors have their own unique URL. So, in our code, by searching the specific URL (Figure 2), we can get the information we need.
+
Figure 2
</font></p><br>
+
</font></center></p>
  
<p><font size=4>
 
(Notice: Since our EDC sensor has not been made yet, so here we use the value detected by ultrasound for replacement. However, our detector’s mechanical design proposal and the software parts are ready.)
 
</font></p><br>
 
  
<p>
 
<img width="50%" src="https://static.igem.org/mediawiki/2017/f/f3/T--NTHU_Taiwan--Applied_Design--App_Design_Code1.png">
 
</p><br>
 
  
<p>
+
<p>
<center>
+
2. Parse JSON to retrieve specific data
<font size="2">
+
</p>
Figure 1
+
</font>
+
</center>
+
</p><br>
+
  
 +
<p>
 +
The JSON file we get from the server contains lots of information, such as API Version、Message、Device ID、Recorded time and Value, etc, therefore, in order to get a specific data in JSON file, we have to use a technique called parsing, to parse JSON Objects and JSON Arrays.(Figure 3)
 +
</p>
  
<p>
+
<p>
<img width="50%" src="https://static.igem.org/mediawiki/2017/e/e3/T--NTHU_Taiwan--Applied_Design--App_Design_Code2.png">
+
(Notice: Since our EDC sensor has not been made yet, so here we use the value detected by ultrasound for replacement. However, our detector’s mechanical design proposal and the software parts are ready.)
</p><br>
+
</p>
  
<p>
+
<p>
<center>
+
<img width="50%" src="https://static.igem.org/mediawiki/2017/9/95/T--NTHU_Taiwan--Applied_Design--App_Design_Code3.png">
<font size="2">
+
</p>
Figure 2
+
</font>
+
</center>
+
</p><br>
+
  
 +
<p><center><font size="2">
 +
Figure 3
 +
</font></center></p>
  
  
<p><font size=4>
+
<p>
2. Parse JSON to retrieve specific data
+
3. Display
</font></p><br>
+
</font></p>
  
<p><font size=4>
+
<p>
The JSON file we get from the server contains lots of information, such as API Version、Message、Device ID、Recorded time and Value, etc, therefore, in order to get a specific data in JSON file, we have to use a technique called parsing, to parse JSON Objects and JSON Arrays.(Figure 3)
+
And finally, here is how we represent our data.
</font></p><br>
+
</p>
  
<p><font size=4>
+
<p>
(Notice: Since our EDC sensor has not been made yet, so here we use the value detected by ultrasound for replacement. However, our detector’s mechanical design proposal and the software parts are ready.)
+
For Tab1 (Real-time detection value from a single detection point), we simply layout some TextView boxes, and let the text be changed to the value we got from JSON file.  
</font></p><br>
+
</p>
  
<p>
+
<p>
<img width="50%" src="https://static.igem.org/mediawiki/2017/9/95/T--NTHU_Taiwan--Applied_Design--App_Design_Code3.png">
+
<img width="50%" src="https://static.igem.org/mediawiki/2017/a/a4/T--NTHU_Taiwan--Applied_Design--App_Design_Code4.png">
</p><br>
+
</p>
  
<p>
+
<p>
<center>
+
For Tab2 (Historical monitoring data from a single detection point), we use GRAPH VIEW (http://www.android-graphview.org/showcase/ ) to display two of our data, which are temperature and concentration of EDC, with y-axis their values and x-axis the recorded time.
<font size="2">
+
</p>
Figure 3
+
</font>
+
</center>
+
</p><br>
+
  
 +
<p>
 +
(Notice: Since our EDC sensor has not been made yet, so here we use the value detected by ultrasound for replacement. However, our detector’s mechanical design proposal and the software parts are ready.)
 +
</p>
  
<p><font size=4>
+
<p>
3. Display
+
<img width="25%" src="https://static.igem.org/mediawiki/2017/5/5d/T--NTHU_Taiwan--Applied_Design--App_Design_UI1.png">
</font></p><br>
+
</p>
  
<p><font size=4>
+
<p>
And finally, here is how we represent our data.
+
As for Tab3 (The distribution of all detection points and their visualized EDC concentrations), in order to use google map in our application, we need to register to Google Developer Console for permission.
</font></p><br>
+
</p>
  
<p><font size=4>
+
<p>
For Tab1 (Real-time detection value from a single detection point), we simply layout some TextView boxes, and let the text be changed to the value we got from JSON file.  
+
<img width="25%" src="https://static.igem.org/mediawiki/2017/4/42/T--NTHU_Taiwan--Applied_Design--App_Design_UI2.png">
</font></p><br>
+
</p>
  
<p>
 
<img width="50%" src="https://static.igem.org/mediawiki/2017/a/a4/T--NTHU_Taiwan--Applied_Design--App_Design_Code4.png">
 
</p><br>
 
  
<p><font size=4>
 
For Tab2 (Historical monitoring data from a single detection point), we use GRAPH VIEW (http://www.android-graphview.org/showcase/ ) to display two of our data, which are temperature and concentration of EDC, with y-axis their values and x-axis the recorded time.
 
</font></p><br>
 
  
<p><font size=4>
+
<video width="960" height="720" controls>
(Notice: Since our EDC sensor has not been made yet, so here we use the value detected by ultrasound for replacement. However, our detector’s mechanical design proposal and the software parts are ready.)
+
<source src="https://static.igem.org/mediawiki/2017/8/8e/T--NTHU_Taiwan--Applied_Design--App_Demo_Video.mp4" type="video/mp4">
</font></p><br>
+
</video>
  
<p><font size=4>
+
<p><center><font size="2">
<img width="25%" src="https://static.igem.org/mediawiki/2017/5/5d/T--NTHU_Taiwan--Applied_Design--App_Design_UI1.png">
+
App Demo Video
</p><br>
+
</font></center></p>
  
<p><font size=4>
 
As for Tab3 (The distribution of all detection points and their visualized EDC concentrations), in order to use google map in our application, we need to register to Google Developer Console for permission.
 
</font></p><br>
 
  
<p>
 
<img width="25%" src="https://static.igem.org/mediawiki/2017/4/42/T--NTHU_Taiwan--Applied_Design--App_Design_UI2.png">
 
</p><br>
 
<br>
 
  
  
<video width="960" height="720" controls>
+
</div>
<source src="https://static.igem.org/mediawiki/2017/8/8e/T--NTHU_Taiwan--Applied_Design--App_Demo_Video.mp4" type="video/mp4">
+
</video>
+
 
+
<p>
+
<center>
+
<font size="2">
+
App Demo Video
+
</font>
+
</center>
+
</p><br>
+
 
+
 
+
</center>
+
</body>
+
+
 
</div>
 
</div>
 
<script type="Text/JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
 
 
<script>
 
 
// This is the jquery part of your template. 
 
// Try not modify any of this code too much since it makes your menu work.
 
 
$(document).ready(function() {
 
 
$("#HQ_page").attr('id','');
 
 
// call the functions that control the menu
 
menu_functionality();
 
hide_show_menu();
 
 
 
 
//this function controls the expand and collapse buttons of the menu and changes the +/- symbols
 
function menu_functionality() {
 
 
//when clicking on a "menu_button", it will change the "+/-" accordingly and it will show/hide the corresponding submenu
 
$(".menu_button").click(function(){
 
 
// add or remove the class "open" , this class holds the "-"
 
$(this).children().toggleClass("open");
 
// show or hide the submenu
 
$(this).next('.submenu_wrapper').fadeToggle(400);
 
});
 
 
// when the screen size is smaller than 800px, the display_menu_control button appears and will show/hide the whole menu
 
$("#display_menu_control").click(function(){
 
$('#menu_content').fadeToggle(400);
 
});
 
 
// call the current page highlight function
 
highlight_current_page();
 
}
 
 
 
// call the highlight current page function to show it on the menu with a different background color
 
function highlight_current_page() {
 
 
// select a page from the menu based on the id assigned to it and the current page name and add the class "current page" to make it change background color
 
$("#"+  wgPageName.substring(wgPageName.lastIndexOf("/")+1, wgPageName.length ) + "_page").addClass("current_page");
 
 
// now that the current_page class has been added to a menu item, make the submenu fade in
 
$(".current_page").parents(".submenu_wrapper").fadeIn(400);
 
// change the +/- symbol of the corresponding menu button
 
$(".current_page").parents(".submenu_wrapper").prev().children().toggleClass("open");
 
 
}
 
 
 
 
// allow button on the black menu bar to show/hide the side menu
 
function hide_show_menu() {
 
 
// in case you preview mode is selected, the menu is hidden for better visibility
 
if (window.location.href.indexOf("submit") >= 0) {
 
$(".igem_2017_menu_wrapper").hide();
 
}
 
 
// if the black menu bar has been loaded
 
  if (document.getElementById('bars_item')) {
 
 
// when the "bars_item" has been clicked
 
$("#bars_item").click(function() {
 
$("#sideMenu").hide();
 
 
// show/hide the menu wrapper
 
$(".igem_2017_menu_wrapper").fadeToggle("100");
 
});
 
  }
 
 
// because the black menu bars loads at a different time than the rest of the page, this function is set on a time out so it can run again in case it has not been loaded yet
 
else {
 
    setTimeout(hide_show_menu, 15);
 
}
 
}
 
 
 
});
 
 
 
</script>
 
  
 
</html>
 
</html>

Revision as of 12:29, 31 October 2017

Demonstrate


The Smart EDC Farmland Protection System

Integrated system of endocrine disrupting chemicals (EDCs) water protection system.

In order to solve some real environmental challenges, our team has proposed an integrated system that can both detect and degrade endocrine disrupting chemicals (EDCs) suitable for farmland water protection.

When we started building this system, we aimed not only to solve a few farmers’ problems but on a bigger scale, agricultural and industrial, since in most of the developing countries, factories could be easily found in between farmland. On the left-hand side of the flowchart, we developed the system that could sense the concentration of the EDC in the water and control the valve to protect the farmland from polluted water. And on the right-hand side of the flowchart, we could collect such data, such as the concentration, time, and place. If the number of devices could grow to dozens or say hundreds, we would be able to tell where and when did the pollution came from.

System flow chart of our EDCs water protection sysetm.

Integrated System Demo Video

First, in normal days, the gate will remain half open and let the water comes into the channel. When the water passes through the gate, it will then passes through the filter. Enzyme mixed with activated carbon is filled in the filter, which can help filter out most of our target endocrine disrupting chemicals. We have proved the capability of the enzyme and filter through modeling and experiment test. Then the water will encounter out fluorescent detection. We pump some water into the detector and mix them with the indicator paper which is coated with modified E. coli, and the EDCs in the water can be captured by our modified E. coli. The E. coli is later excited with laser light to produce fluorescent, the fluorescent signal will be collected and calculated into relative EDCs concentration.

If the detected EDCs concentration is safe for the farmland to use, the microcontroller which is embedded in the detector will send a signal to the gate to tell it to remain open to let the water in. However, if the detected EDCs concentration is above the safety standard, a feedback signal will be sent to the gate and lower it to protect the farmland from further damage. The reading of the EDCs concentration will also be sent to our database and the App, which can allow the farmer or the farmland manager to remotely monitor the condition of the farmland.

IoT System and App

With the implementation of our device, we now can provide farmers a water protection system. Furthermore, we have developed an app and IoT system. The app will allow the user to know the condition of the farmland water, and the IoT system is set to save all the data and collaborate with other nearby protection systems to build up a “safe web.” When our devices are widely spread around a region, we would not only be able to help the farmers keep their farmland’ water source safe, but even identify when and where the pollution came from.

The IoT System

Why IoT?

In order to fulfill the purpose of data monitoring in real-time, we have to implement IoT system to our device. The implementation can be simply classified in the following steps:

1. Sensors (temperature, PH detector) collect data to our controller.

2. Controller upload data to cloud through wifi.

What have been used?

Cloud Platform : MediaTek Cloud Sandbox

We created an account on MediaTek Cloud Sandbox, therefore, our data will be going there.

After establishing an MCS account, we start to create our virtual device and data channel. When data channel is being created, they will have their own Device ID and Device Key. So, when writing our Arduino code and assign them with specific Device ID and Device Key, our data will be able to send to that data channel.

Controller and Sensors

The controller is the heart of our device, where it is responsible for receiving, processing, uploading data to the cloud, and also control our motor.

The reason why we choose MediaTek LinkIt™ ONE as our controller mainly because it has its own cloud platform MediaTek Cloud Sandbox, which enable us to implement IoT system to our device much easier. As for the sensors, right now we have used a thermometer and pH meter. Fluorescence detector will be added to the system once biochip has been successfully manufactured.

How we do this?

Step 1: Sensors collect data to our controller

This part is relatively simple, based on the sensors we use, we search for the corresponding code on the Internet, and copy them into our Arduino code (Figure 1). Once we have the code and correct PIN connected to our sensors, then we are good to go.

Figure 1

Step 2: Controller upload data to cloud through wifi

Remember the Device ID and Device Key that we mentioned before? In this part, we are going to use it. The function of them works like the address, when we assign specific Device ID and Device Key inside our code (Figure 2), our data can be correctly sent to the corresponding data channel.

Figure 2

IoT Demo Video

The App Design

Why we built this APP?

The purpose of building this APP is that we hope to monitor values from our detection point in real-time.Furthermore, if we have multiple detection points in the future, we can label all data with different colors of markers according to their concentrations, and show them on the google map. Therefore, we can get regional concentrations at once, which enable us to identify sources of pollution with ease.

How do we build our APP?

The software we use is Android Studio. And we manage to represent our detection data in the following ways:

Tab1: Real-time detection value from a single detection point.

Tab2: Historical monitoring data from a single detection point.

Tab3: The distribution of all detection points and their visualized EDC concentrations.

Since our detection system has implemented Internet of Things (IoT), therefore, all data being detected will be stored to our cloud in JSON format (For details, please refer to DEVICE / Software – IoT page). So if we want to retrieve those data from our cloud, what we have to do can be simplified as followings:

1. Get JSON file from server.

2. Parse JSON to retrieve specific data.

3. Display.

Now we will go through those steps one by one :

1. Get JSON file from server

Data is uploaded to our cloud were stored in JSON format (Figure 1), and data being uploaded by different sensors have their own unique URL. So, in our code, by searching the specific URL (Figure 2), we can get the information we need.

(Notice: Since our EDC sensor has not been made yet, so here we use the value detected by ultrasound for replacement. However, our detector’s mechanical design proposal and the software parts are ready.)

Figure 1

Figure 2

2. Parse JSON to retrieve specific data

The JSON file we get from the server contains lots of information, such as API Version、Message、Device ID、Recorded time and Value, etc, therefore, in order to get a specific data in JSON file, we have to use a technique called parsing, to parse JSON Objects and JSON Arrays.(Figure 3)

(Notice: Since our EDC sensor has not been made yet, so here we use the value detected by ultrasound for replacement. However, our detector’s mechanical design proposal and the software parts are ready.)

Figure 3

3. Display

And finally, here is how we represent our data.

For Tab1 (Real-time detection value from a single detection point), we simply layout some TextView boxes, and let the text be changed to the value we got from JSON file.

For Tab2 (Historical monitoring data from a single detection point), we use GRAPH VIEW (http://www.android-graphview.org/showcase/ ) to display two of our data, which are temperature and concentration of EDC, with y-axis their values and x-axis the recorded time.

(Notice: Since our EDC sensor has not been made yet, so here we use the value detected by ultrasound for replacement. However, our detector’s mechanical design proposal and the software parts are ready.)

As for Tab3 (The distribution of all detection points and their visualized EDC concentrations), in order to use google map in our application, we need to register to Google Developer Console for permission.

App Demo Video