Latest revision as of 03:06, 2 November 2017

1. Proposed the design of a farmland water protection system against endocrine disrupting chemicals (EDCs).

2. Developed a functional prototype filter for the EDCs degradation.

3. Proposed the mechanical design of the fluorescence-based detector that shall tell the concentration of EDCs.

4. Designed the testing app and database that are capable of telling the condition of farmland and forming a safe web that knows when and where the pollution happens.

The Smart EDC Farmland Protection System

Farmland System Demo Model

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.

Integrated System Demo Video

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

System flow chart of our EDCs water protection sysetm.

In general, 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 the modeling and experiment test. Then the water will encounter our fluorescent detection device. 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 (whose) 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 limit, 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.

Filter Design: Functional Prototype

Our target is to make the filter have the best efficient and longest lifetime. In the design, we use different pore size material to protect our core enzyme, so that it will not be damaged by other particles, and extending the filter lifetime. The front part of the filter is composed of polypropylene fiber, the back end of the filter is filled with activated carbon, which is mixed with the enzyme that can degrade our target endocrine disrupting chemicals. As for the outer shell, it is made of a layer of steel net and galvanized iron. A Solidworks filter sketch is provided underneath.

Section view of the filter.

Before making the functional prototype, our wet and dry lab members conducted enzyme kinetics modeling to know the degradation speed and time, also a concentration test is performed to know the activated carbon’s EDC absorbing ability. Both modeling and test sure positive result, for further details, please check out the Model page under the Project category. Some prototype photos are provided underneath, too.

Prototype front view.

Prototype rear view.

Prototype side view.

Fluorescence Detector: Design Concept and Current Lab Result

Our design filer has proven to be capable of degrading the endocrine disrupting chemicals (EDCs) in the water. However, there are more situations needed to be considered. For example, when factories illegally emit wastewater that contains a high concentration of EDCs, it may exceed the degradation capability of our filter, and the farmland could then suffer serious damage. Also when typhoon approaches, the heavy muddy water can severely contaminate the growing environment of the crops. Thus, it is important to isolate such water flowing into the farmland. Hence we proposed a design of the fluorescence-based EDCs detector, that can detect the concentration of EDCs, and automatically controls the gate depending on the feedback signals sent by the detector.

The core of the fluorescence-based EDCs detector lies on the chip which we designed to capture EDCs for the water sample. The mechanism behind it is to modify the E. colis expression of GFP and ER-alpha. EDCs will combine with ER-alpha, causing the structure of ER-alpha to change. And then monobody will capture the bounded ER-alpha together with E. coli, leading to the change of fluorescence or surface plasmon resonance signal on the gold chip and we can thus estimate the concentration of EDCs. Despite there are still some technical challenges for us to tackle, for instance, the transforming of GFP into E. coli. We have been able to detect BPA and NP concentration as low as 5µM (about 1 ppm) in the water.

Here we introduce the mechanical design proposal of our fluorescence-based EDCs detector. The mechanism of the fluorescence-based EDCs detector works as follow: First installed the biochip into the detector. Turn on the detector’s microcontroller (MCU) and mini water pump. The pump will periodically suck water and flow through the biochip A laser light will excite the E. coli ’s GFP gene on the biochip and send out fluorescence. The fluorescence will pass through an optical filter then be received by our light detector. The program in the MCU will calculate the fluorescence light into relative EDCs concentration If the concentration is lower than the safety standard, the MCU will not send a signal to the gate; if the concentration is higher than the safety standard, a feedback signal will be sent to the gate to close it in order to protect the farmland.

Fluorescence-based EDCs detector front view.

Mechanical design of the fluorescence-based EDCs detector.

Water Gate

The water gate in our model is controlled by a step motor, and the screw bar in the middle of the gate enable the step motor to control the rising and lowering of the gate. The mechanism of the rising and lowering depends on the EDCs concentration sensed by our fluorescence-based EDCs detector. When the EDCs concentration exceeds the safety value or the flow rate is too fast, the microcontroller in the detector will automatically send out a control signal to lower the gate to protect the farmland.

watergate front view and side view

Block Diagram for Water Gate Control

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 periodically, 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 has 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 periodically.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: Periodically 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 in 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 the 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 (Periodically 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

@@ Line 1: / Line 1: @@
+{{:Team:NTHU_Taiwan/MenuBar}}
 <html>
@@ Line 10: / Line 11: @@
 	#bodyContent {background-color:#f6f6e3;}
 	#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 117: / Line 20: @@
 		display:block;
 		float:left;
-		font-family:'Open Sans', sans-serif;
+		font-family:'Helvetica', sans-serif;
 		background-color: #F6F6E3;
 	}
@@ 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 {
-		padding: 40px 0px 15px 0px;
+		font-family: Helvetica;
+		padding: 50px 0px 15px 0px;
 		border-bottom: 0px;
 		color: #2C2C2C;
@@ Line 143: / Line 47: @@
 	}
-	#pdf {
+	.igem_2017_content_wrapper .content {
 		width: 950px;
-		height: 1200px;
 		margin: 2em auto;
-		padding-top: 20px;
 	}
-	#pdf object {
+	.igem_2017_content_wrapper .content p{
+		font-family: Helvetica;
+		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;
-		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>
@@ Line 193: / Line 100: @@
 </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="https://2017.igem.org/Team:NTHU_Taiwan/Protocol">
-					<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="#">
-					<div>
-						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 106: @@
 <!-- start of content -->
 <div class="igem_2017_content_wrapper">
-	<img width="25%" src="https://static.igem.org/mediawiki/2017/e/e2/T--NTHU_Taiwan--Notebook--Top.png">
+	<img width="25%" src="https://static.igem.org/mediawiki/2017/e/e1/T--NTHU_Taiwan--DryLab--title.png">
-	<div style="text-align: center">
+        <div style="text-align: center">
 		<h1 style="color:#DF6A6A">Applied Design
@@ Line 404: / Line 113: @@
 		<hr width="20%" />
 	</div>
+	<div class="content">
-<style>
+<table style="line-height:27px";"border:3px #cccccc solid;" cellpadding="10" border='1';"font-size:25px;text-align:justify;
-p{
+text-justify:inter-ideograph;">
-width:1000px;
+	　<tr>
-font-size:20px;
+	　<td style="background-color: #f6f6e3"><center><h1>Overview</h1></center><br>
-text-align: justify;
+<font size=5><LINE-HEIGHT:1.3em>
-text-justify:inter-ideograph;
+. Proposed the design of a farmland water protection system against endocrine disrupting chemicals (EDCs).<br><br>
-line-height: 30px;
+. Developed a functional prototype filter for the EDCs degradation.<br><br>
-}
+. Proposed the mechanical design of the fluorescence-based detector that shall tell the concentration of EDCs.<br><br>
-</style>
+. Designed the testing app and database that are capable of telling the condition of farmland and forming a safe web that knows when and where the pollution happens.<br><br>
-<body>
-<center>
+</font></font>
+</td>
+　</tr>
+	</table>
-<h1 align="center">
-The Smart EDC Farmland Protection System
-</h1>
+		<center><h1 style="color: #6c5070">The Smart EDC Farmland Protection System</h1></center>
-<img width="50%" src="https://static.igem.org/mediawiki/2017/f/f0/T--NTHU_Taiwan--AppliedDesign--FarmlandComputerModel.png">
+	<img width="50%" src="https://static.igem.org/mediawiki/2017/6/6e/T--NTHU_Taiwan--Demonstarte--Model_Prototype.jpg">
+	<p>	<center><font size="2">
+	Farmland System Demo Model
+	</font>	</center></p><br>
-<p>
-<center>
-<font size="2">
-Integrated system of endocrine disrupting chemicals (EDCs) water protection system.
-</font>
-</center>
-</p>
-<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.
+	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>
+	</p>
-<p>
+	<p>
-<font size=4>
-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 slide, 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 slide, 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">
+	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>
-<p>
-<center>
-<font size="2">
-System flow chart of our EDCs water protection sysetm.
-</font>
-</center>
-</p>
-<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 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.
+	<video style="display:block; margin: 0 auto;" width="90%" controls>
-</p>
+	<source src=" https://static.igem.org/mediawiki/2017/0/02/T--NTHU_Taiwan--Demonstrate--Model_Demo_Video.mp4" type="video/mp4"></video>
-<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=4>
-<b>
-Filter Design: Functional Prototype
-</b>
-</font>
-</center>
-</p>
-<p><font size=4>
+	<p><center><font size="2">
-Our target is to make the filter have the best efficient and longest lifetime. In the design, we use different pore size material to protect our core enzyme, so that it will not be damaged by other particles, and extending the filter lifetime. The front part of the filter is composed of polypropylene fiber, the back end of the filter is filled with activated carbon, which is mixed with the enzyme that can degrade our target endocrine disrupting chemicals. As for the outer shell, it is made of a layer of steel net and galvanized iron. A Solidworks filter sketch is provided underneath.
+	Integrated System Demo Video
-</font>
+	</font></center></p><br><br><br>
-</p>
-<p>
-<img width="50%"src="https://static.igem.org/mediawiki/2017/8/8b/T--NTHU_Taiwan--Applied_Design--Section_view_of_the_filter.png">
-</p>
-<p>
-<center>
-<font size="2">
-Section view of the filter.
-</font>
-</center>
-</p>
-<p><font size=4>
+	<img width="50%" src="https://static.igem.org/mediawiki/2017/f/f0/T--NTHU_Taiwan--AppliedDesign--FarmlandComputerModel.png">
-Before making the functional prototype, our wet and dry lab members conducted enzyme kinetics modelling to know the degradation speed and time, also a concentration test is performed to know the activated carbon’s EDC absorbing ability. Both modelling and test sure positive result, for further details, please check out the Model page under the Project category. Some prototype photos are provided underneath, too.
-</font>
-</p>
-<p>
+	<p>
-<img width="50%"src="https://static.igem.org/mediawiki/2017/6/65/T--NTHU_Taiwan--AppliedDesign--PrototypeFrontView.png">
+	<center>
-</p>
+	<font size="2">
+	Integrated system of endocrine disrupting chemicals (EDCs) water protection system.
+	</font>
+	</center>
+	</p>
+	<br><br>
-<p>
-<center>
-<font size="2">
-Prototype front view.
-</font>
-</center>
-</p>
-<p>
-<img width="50%"src="https://static.igem.org/mediawiki/2017/6/64/T--NTHU_Taiwan--AppliedDesign--PrototypeRearView.png">
-</p>
-<p>
-<center>
-<font size="2">
-Prototype rear view.
-</font>
-</center>
-</p>
-<p>
+	<img width="50%" src="https://static.igem.org/mediawiki/2017/d/d9/T--NTHU_Taiwan--Applied_Design--System_Flow_Chart.png">
-<img width="50%"src="https://static.igem.org/mediawiki/2017/b/bc/T--NTHU_Taiwan--AppliedDesign--PrototypeSideView.png">
-</p>
-<p>
+	<p><center><font size="2">
-<center>
+	System flow chart of our EDCs water protection sysetm.
-<font size="2">
+	</font></center></p>
-Prototype side view.
-</font>
-</center>
-</p>
-<p>
-<center>
-<font size=4>
-<b>
-Fluorescence Detector: Design Concept and Current Lab Result
-</b>
-</font>
-</center>
-</p>
-<p>
-Our design filer has proven to be capable of degrading the endocrine disrupting chemicals (EDCs) in the water. However, there are more situations needed to be considered. For example, when factories illegally emit wastewater that contains a high concentration of EDCs, it may exceed the degradation capability of our filter, and the farmland could then suffer serious damage. Also when typhoon approaches, the heavy muddy water can severely contaminate the growing environment of the crops. Thus, it is important to isolate such water flowing into the farmland. Hence we proposed a design of the fluorescence-based EDCs detector, that can detect the concentration of EDCs, and automatically controls the gate depending on the feedback signals sent by the detector.
-</p>
-<p>
-The core of the fluorescence-based EDCs detector lies on the chip which we designed to capture EDCs for the water sample. The mechanism behind it is to modify the E. coli’s expression of GFP and ER-alpha. EDCs will combine with ER-alpha, causing the structure of ER-alpha to change.  And then monobody will capture the bounded ER-alpha together with E.coli, leading to the change of fluorescence or surface plasmon resonance signal on the gold chip and we can thus estimate the concentration of EDCs. Despite there are still some technical challenges for us to tackle, for instance, the transforming of GFP into E. coli. We have been able to detect BPA and NP concentration as low as 5µM (about 1 ppm) in the water.
-</p>
-<p>
-Here we introduce the mechanical design proposal of our fluorescence-based EDCs detector. The mechanism of the fluorescence-based EDCs detector works as follow:
-First installed the biochip into the detector.
-Turn on the detector’s microcontroller (MCU) and mini water pump.
-The pump will periodically suck water and flow through the biochip
-A laser light will excite the E. coli ’s GFP gene on the biochip and send out fluorescence.
-The fluorescence will pass through an optical filter then be received by our light detector.
-The program in the MCU will calculate the fluorescence light into relative EDCs concentration
-If the concentration is lower than the safety standard, the MCU will not send a signal to the gate; if the concentration is higher than the safety standard, a feedback signal will be sent to the gate to close it in order to protect the farmland.
-</p>
-<p>
+	<p>
-<img width="50%"src="https://static.igem.org/mediawiki/2017/2/2d/T--NTHU_Taiwan--Applied_Design--Fluorescence_based_EDCs_detector_front_view.png">
+	<br><br>In general, 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 the modeling and experiment test. Then the water will encounter our fluorescent detection device. 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 (whose) signal will be collected and calculated into relative EDCs concentration.
-</p>
+	</p>
-<p>
+	<p>
-<center>
+	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 limit, 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.
-<font size="2">
+	</p>
-Fluorescence-based EDCs detector front view.
-</font>
-</center>
-</p>
+	<h2><br><br>
+	Filter Design: Functional Prototype
+	</h2>
-<p>
+	<p>
-<img width="50%"src="https://static.igem.org/mediawiki/2017/archive/9/90/20171029004500%21T--NTHU_Taiwan--Applied_Design--Mechanical_design_of_the_fluorescence_based_EDCs_detector.png">
+	Our target is to make the filter have the best efficient and longest lifetime. In the design, we use different pore size material to protect our core enzyme, so that it will not be damaged by other particles, and extending the filter lifetime. The front part of the filter is composed of polypropylene fiber, the back end of the filter is filled with activated carbon, which is mixed with the enzyme that can degrade our target endocrine disrupting chemicals. As for the outer shell, it is made of a layer of steel net and galvanized iron. A Solidworks filter sketch is provided underneath.
-</p>
+	</p>
-<p>
+	<p>
-<center>
+	<img width="50%"src="https://static.igem.org/mediawiki/2017/8/8b/T--NTHU_Taiwan--Applied_Design--Section_view_of_the_filter.png">
-<font size="2">
+	</p>
-Mechanical design of the fluorescence-based EDCs detector.
-</font>
-</center>
-</p>
+	<p><center><font size="2">
+	Section view of the filter.
+	</font></center></p>
-<p>
-<center>
-<font size=4>
-<b>
-Water Gate
-</b>
-</font>
-</center>
-</p>
+	<p>
+	<br>Before making the functional prototype, our wet and dry lab members conducted enzyme kinetics modeling to know the degradation speed and time, also a concentration test is performed to know the activated carbon’s EDC absorbing ability. Both modeling and test sure positive result, for further details, please check out the Model page under the Project category. Some prototype photos are provided underneath, too.
+	</p>
+	<p>
-<p>
+	<img width="50%"src="https://static.igem.org/mediawiki/2017/6/65/T--NTHU_Taiwan--AppliedDesign--PrototypeFrontView.png">
-The water gate in our model is controlled by a step motor, and the screw bar in the middle of the gate enable the step motor to control the rising and lowering of the gate. The mechanism of the rising and lowering depends on the EDCs concentration sensed by our fluorescence-based EDCs detector. When the EDCs concentration exceeds the safety value or the flow rate is too fast, the microcontroller in the detector will automatically send out a control signal to lower the gate to protect the farmland.
+	</p>
-</p>
-<p>
+	<p><center><font size="2">
-<img src="https://static.igem.org/mediawiki/2017/c/ca/T--NTHU_Taiwan--Applied--Water_Gate.png">
+	Prototype front view.
-</p>
+	</font></center></p>
-<p>
-<center>
-<font size="2">
-water gate front view and side view
-</font>
-</center>
-</p>
+	<p>
+	<img width="50%"src="https://static.igem.org/mediawiki/2017/6/64/T--NTHU_Taiwan--AppliedDesign--PrototypeRearView.png">
+	</p>
-<p>
+	<p><center><font size="2">
-<img width="75%"src="https://static.igem.org/mediawiki/2017/c/cb/T--NTHU_Taiwan--AppliedDesign--Feedback_Control.png">
+	Prototype rear view.
-</p>
+	</font></center></p>
+	<p>
+	<img width="50%"src="https://static.igem.org/mediawiki/2017/b/bc/T--NTHU_Taiwan--AppliedDesign--PrototypeSideView.png">
+	</p>
-<p>
+	<p><center><font size="2">
-<center>
+	Prototype side view.
-<font size="2">
+	</font></center></p>
-Block Diagram for Water Gate Control
-</font>
-</center>
-</p>
-<p>
+	<h2><br><br>
-<center>
+	Fluorescence Detector: Design Concept and Current Lab Result
-<font size=4>
+	</h2>
-<b>
-IoT System and App
-</b>
-</font>
-</center>
-</p>
+	<p>
+	Our design filer has proven to be capable of degrading the endocrine disrupting chemicals (EDCs) in the water. However, there are more situations needed to be considered. For example, when factories illegally emit wastewater that contains a high concentration of EDCs, it may exceed the degradation capability of our filter, and the farmland could then suffer serious damage. Also when typhoon approaches, the heavy muddy water can severely contaminate the growing environment of the crops. Thus, it is important to isolate such water flowing into the farmland. Hence we proposed a design of the fluorescence-based EDCs detector, that can detect the concentration of EDCs, and automatically controls the gate depending on the feedback signals sent by the detector.
+	</p><br><br>
-<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.
+	The core of the fluorescence-based EDCs detector lies on the chip which we designed to capture EDCs for the water sample. The mechanism behind it is to modify the <I>E. coli</I>s expression of GFP and ER-alpha. EDCs will combine with ER-alpha, causing the structure of ER-alpha to change.  And then monobody will capture the bounded ER-alpha together with <I>E. coli</I>, leading to the change of fluorescence or surface plasmon resonance signal on the gold chip and we can thus estimate the concentration of EDCs. Despite there are still some technical challenges for us to tackle, for instance, the transforming of GFP into <I>E. coli</I>. We have been able to detect BPA and NP concentration as low as 5µM (about 1 ppm) in the water.
-</p>
+	</p><br><br>
-<p>
+	<p>
-<center>
+	Here we introduce the mechanical design proposal of our fluorescence-based EDCs detector. The mechanism of the fluorescence-based EDCs detector works as follow:
-<font size=4>
+	First installed the biochip into the detector.
-<b>
+	Turn on the detector’s microcontroller (MCU) and mini water pump.
-The IoT System
+	The pump will periodically suck water and flow through the biochip
-</b>
+	A laser light will excite the <I>E. coli</I> ’s GFP gene on the biochip and send out fluorescence.
-</font>
+	The fluorescence will pass through an optical filter then be received by our light detector.
-</center>
+	The program in the MCU will calculate the fluorescence light into relative EDCs concentration
-</p>
+	If the concentration is lower than the safety standard, the MCU will not send a signal to the gate; if the concentration is higher than the safety standard, a feedback signal will be sent to the gate to close it in order to protect the farmland.
+	</p>
+	<p>
+	<img width="50%"src="https://static.igem.org/mediawiki/2017/2/2d/T--NTHU_Taiwan--Applied_Design--Fluorescence_based_EDCs_detector_front_view.png">
+	</p>
-<p>
+	<p><center><font size="2">
-<b>
+	Fluorescence-based EDCs detector front view.
-Why IoT?
+	</font></center></p>
-</b>
-</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:
-</p>
-<p>
+	<p>
-. Sensors (temperature, PH detector) collect data to our controller.
+	<img width="50%"src="https://static.igem.org/mediawiki/2017/archive/9/90/20171029004500%21T--NTHU_Taiwan--Applied_Design--Mechanical_design_of_the_fluorescence_based_EDCs_detector.png">
-</p>
+	</p>
-<p>
+	<p><center><font size="2">
-. Controller upload data to cloud through wifi.
+	Mechanical design of the fluorescence-based EDCs detector.
-</p>
+	</font></center></p>
-<p>
-<b>
-What have been used?
-</b>
-</p>
-<p>
+	<h2>
-<b>
+	Water Gate
-Cloud Platform : MediaTek Cloud Sandbox
+	</h2>
-</b>
-</p>
+	<p>
+	The water gate in our model is controlled by a step motor, and the screw bar in the middle of the gate enable the step motor to control the rising and lowering of the gate. The mechanism of the rising and lowering depends on the EDCs concentration sensed by our fluorescence-based EDCs detector. When the EDCs concentration exceeds the safety value or the flow rate is too fast, the microcontroller in the detector will automatically send out a control signal to lower the gate to protect the farmland.
+	</p>
-<p>
+	<p>
-We created an account on MediaTek Cloud Sandbox, therefore, our data will be going there.
+	<img src="https://static.igem.org/mediawiki/2017/c/ca/T--NTHU_Taiwan--Applied--Water_Gate.png">
-</p>
+	</p>
+	<p><center><font size="2">
+	watergate front view and side view
+	</font></center></p>
-<p>
-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>
-<p>
-<b>
-Controller and Sensors
-</b>
-</p>
-<p><font size=4>
+	<p>
-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.
+	<img width="75%"src="https://static.igem.org/mediawiki/2017/6/60/T--NTHU_Taiwan--Applied_Design--Block_Diagram.png">
-</font></p>
+	</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.
+	Block Diagram for Water Gate Control
-</font></p>
+	</font></center></p>
-<p><font size=4>
-<b>
-How we do this?
-</b>
-</font></p>
-<p><font size=4>
+	<h2>
-<b>
+	IoT System and App
-Step 1:  Sensors collect data to our controller
+	</h2>
-</b>
-</font></p>
-<p><font size=4>
-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.
-</font></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.<br><br><br>
+	</p>
-<p>
+	<h2>
-<img width="50%" src="https://static.igem.org/mediawiki/2017/6/60/T--NTHU_Taiwan--Applied_Design--IoT_step1_code.png">
+	The IoT System
-</p>
+	</h2>
-<p>
-<center>
-<font size="2">
-Figure 1
-</font>
-</center>
-</p>
+	<h2>
+	Why IoT?
+	</h2>
-<p><font size=4>
+	<p>
-<b>
+	In order to fulfill the purpose of data monitoring in periodically, we have to implement IoT system to our device. The implementation can be simply classified in the following steps:
-Step 2: Controller upload data to cloud through wifi
+	</p>
-</b>
-</font></p>
-<p><font size=4>
+	<p>
-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.
+. Sensors (temperature, PH detector) collect data to our controller.
-</font></p>
+	</p>
-<p>
+	<p>
-<img width="50%" src="https://static.igem.org/mediawiki/2017/1/1a/T--NTHU_Taiwan--Applied_design--IoT_step2_code.png">
+. Controller upload data to cloud through wifi.
-</p>
+	</p><br><br><br>
+	<h2>
+	What has been used?
+	</h2>
-<p>
+	<h2>
-<center>
+	Cloud Platform: MediaTek Cloud Sandbox
-<font size="2">
+	</h2>
-Figure 2
-</font>
-</center>
-</p>
-<video class='center' width="640" height="480" src="https://static.igem.org/mediawiki/2017/3/33/T--NTHU_Taiwan--test.mp4" controls></video>
+	<p>
+        We created an account on MediaTek Cloud Sandbox, therefore, our data will be going there.
+	</p>
-<p>
+	<p>
-<center>
+	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.
-<font size="2">
+	</p>
-IoT Demo Video
-</font>
-</center>
-</p>
+	<h2>
+	Controller and Sensors
+	</h2>
-<p align="center">
+	<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.
-<b>
+	</p>
-The App Design
-</font>
-</b>
-</p>
-<p><font size=4>
-<b>
-Why we built this APP?
-</b>
-</font></p>
-<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.
+	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.
-</font></p>
+	</p><br><br><br>
-<p><font size=4>
+	<h2>
-<b>
+	How we do this?
-How do we build our APP?
+	</h2>
-</b>
-</font></p>
-<p><font size=4>
+	<h2>
-The software we use is Android Studio. And we manage to represent our detection data in the following ways:
+	Step 1:  Sensors collect data to our controller
-</font></p>
+	</h2>
-<p><font size=4>
+	<p>
-Tab1: Real-time detection value from a single detection point.
+	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.
-</font></p>
+	</p>
-<p><font size=4>
-Tab2: Historical monitoring data from a single detection point.
-</font></p>
-<p><font size=4>
+	<p>
-Tab3: The distribution of all detection points and their visualized EDC concentrations.
+	<img width="50%" src="https://static.igem.org/mediawiki/2017/6/60/T--NTHU_Taiwan--Applied_Design--IoT_step1_code.png">
-</font></p>
+	</p>
-<p><font size=4>
+	<p><center><font size="2">
-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:
+	Figure 1
-</font></p>
+	</font></center></p>
-<p><font size=4>
-. Get JSON file from server.
-</font></p>
-<p><font size=4>
+	<h2>
-. Parse JSON to retrieve specific data.
+	Step 2: Controller upload data to cloud through wifi
-</font></p>
+	</h2>
-<p><font size=4>
+	<p>
-. Display.
+	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>
+	</p>
-<p><font size=4>
+	<p>
-Now we will go through those steps one by one :
+	<img width="50%" src="https://static.igem.org/mediawiki/2017/1/1a/T--NTHU_Taiwan--Applied_design--IoT_step2_code.png">
-</font></p>
+	</p>
-<p><font size=4>
-. Get JSON file from server
-</font></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>
+	</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>
-<p>
+	<video style="display:block; margin: 0 auto;" width="90%" controls>
-<img width="50%" src="https://static.igem.org/mediawiki/2017/f/f3/T--NTHU_Taiwan--Applied_Design--App_Design_Code1.png">
+	<source src="https://static.igem.org/mediawiki/2017/3/33/T--NTHU_Taiwan--test.mp4" type="video/mp4">
-</p>
+	</video>
-<p>
+	<p><center><font size="2">
-<center>
+	IoT Demo Video
-<font size="2">
+	</font></center></p><br><br><br>
-Figure 1
-</font>
-</center>
-</p>
-<p>
+	<h2>
-<img width="50%" src="https://static.igem.org/mediawiki/2017/e/e3/T--NTHU_Taiwan--Applied_Design--App_Design_Code2.png">
+	The App Design
-</p>
+	</h2>
-<p>
+	<h2>
-<center>
+	Why we built this APP?
-<font size="2">
+	</h2>
-Figure 2
-</font>
-</center>
-</p>
+	<p>
+	The purpose of building this APP is that we hope to monitor values from our detection point in periodically.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><br><br><br>
+	<h2>
+	How do we build our APP?
+	</h2>
-<p><font size=4>
+	<p>
-. Parse JSON to retrieve specific data
+	The software we use is Android Studio. And we manage to represent our detection data in the following ways:
-</font></p>
+	</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)
+	Tab1: Periodically detection value from a single detection point.
-</font></p>
+	</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.)
+	Tab2: Historical monitoring data from a single detection point.
-</font></p>
+	</p>
-<p>
+	<p>
-<img width="50%" src="https://static.igem.org/mediawiki/2017/9/95/T--NTHU_Taiwan--Applied_Design--App_Design_Code3.png">
+	Tab3: The distribution of all detection points and their visualized EDC concentrations.
-</p>
+	</p>
-<p>
+	<p>
-<center>
+	Since our detection system has implemented Internet of Things (IoT), therefore, all data being detected will be stored in 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 size="2">
+	</p>
-Figure 3
-</font>
-</center>
-</p>
+	<p>
+. Get JSON file from the server.
+	</p>
-<p><font size=4>
+	<p>
-. Display
+. Parse JSON to retrieve specific data.
-</font></p>
+	</p>
-<p><font size=4>
+	<p>
-And finally, here is how we represent our data.
+. Display.
-</font></p>
+	</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.
+	Now we will go through those steps one by one :
-</font></p>
+	</p>
-<p>
+	<p>
-<img width="50%" src="https://static.igem.org/mediawiki/2017/a/a4/T--NTHU_Taiwan--Applied_Design--App_Design_Code4.png">
+. Get JSON file from server
-</p>
+	</p>
-<p><font size=4>
+	<p>
-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.
+	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>
+	</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.)
+	(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>
+	</p>
-<p><font size=4>
+	<p>
-<img width="25%" src="https://static.igem.org/mediawiki/2017/5/5d/T--NTHU_Taiwan--Applied_Design--App_Design_UI1.png">
+	<img width="50%" src="https://static.igem.org/mediawiki/2017/f/f3/T--NTHU_Taiwan--Applied_Design--App_Design_Code1.png">
-</p>
+	</p>
-<p><font size=4>
+	<p><center><font size="2">
-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.
+	Figure 1
-</font></p>
+	</font></center></p>
-<p>
-<img width="25%" src="https://static.igem.org/mediawiki/2017/4/42/T--NTHU_Taiwan--Applied_Design--App_Design_UI2.png">
-</p>
-<br>
+	<img width="50%" src="https://static.igem.org/mediawiki/2017/e/e3/T--NTHU_Taiwan--Applied_Design--App_Design_Code2.png">
-<video class='center' width="640" height="480" src=" https://static.igem.org/mediawiki/2017/8/8e/T--NTHU_Taiwan--Applied_Design--App_Demo_Video.mp4" controls></video>
+	<p><center><font size="2">
+	Figure 2
+	</font></center></p>
-<p>
-<center>
-<font size="2">
-App Demo Video
-</font>
-</center>
-</p>
+	<p>
+. Parse JSON to retrieve specific data
+	</p>
-</center>
+	<p>
-</body>
+	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>
-</div>
+	(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>
+	<img width="50%" src="https://static.igem.org/mediawiki/2017/9/95/T--NTHU_Taiwan--Applied_Design--App_Design_Code3.png">
+	</p>
-<script type="Text/JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
+	<p><center><font size="2">
+	Figure 3
+	</font></center></p>
-<script>
-	// This is the jquery part of your template.
+	<p>
-	// Try not modify any of this code too much since it makes your menu work.
+. Display
+	</p>
-	$(document).ready(function() {
+	<p>
+	And finally, here is how we represent our data.
+	</p>
-		$("#HQ_page").attr('id','');
+	<p>
+	For Tab1 (Periodically 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.
+	</p>
-		// call the functions that control the menu
+	<p>
-		menu_functionality();
+	<img width="50%" src="https://static.igem.org/mediawiki/2017/a/a4/T--NTHU_Taiwan--Applied_Design--App_Design_Code4.png">
-		hide_show_menu();
+	</p>
+	<p>
+	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.
+	</p>
+	<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>
-		//this function controls the expand and collapse buttons of the menu and changes the +/- symbols
+	<img width="25%" src="https://static.igem.org/mediawiki/2017/5/5d/T--NTHU_Taiwan--Applied_Design--App_Design_UI1.png">
-		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 "-"
+	<p>
-				$(this).children().toggleClass("open");
+	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.
-				// show or hide the submenu
+	</p>
-				$(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
+	<p>
-			$("#display_menu_control").click(function(){
+	<img width="25%" src="https://static.igem.org/mediawiki/2017/4/42/T--NTHU_Taiwan--Applied_Design--App_Design_UI2.png">
-				$('#menu_content').fadeToggle(400);
+	</p>
-			});
-			// call the current page highlight function
-			highlight_current_page();
-		}
+	<video style="display:block; margin: 0 auto;" width="90%" controls>
+	<source src="https://static.igem.org/mediawiki/2017/8/8e/T--NTHU_Taiwan--Applied_Design--App_Demo_Video.mp4" type="video/mp4">
+	</video>
-		// call the highlight current page function to show it on the menu with a different background color
+	<p><center><font size="2">
-		function highlight_current_page() {
+	App Demo Video
+	</font></center></p>
-			// 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
+	</div>
-		function hide_show_menu() {
+</div>
-			// 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>

Difference between revisions of "Team:NTHU Taiwan/Applied Design"

Latest revision as of 03:06, 2 November 2017

Applied Design

Overview

The Smart EDC Farmland Protection System

Filter Design: Functional Prototype

Fluorescence Detector: Design Concept and Current Lab Result

Water Gate

IoT System and App

The IoT System

Why IoT?

What has been used?

Cloud Platform: MediaTek Cloud Sandbox

Controller and Sensors

How we do this?

Step 1: Sensors collect data to our controller

Step 2: Controller upload data to cloud through wifi

The App Design

Why we built this APP?

How do we build our APP?