|
|
| (23 intermediate revisions by 4 users not shown) |
| 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 117: |
Line 20: |
| | display:block; | | display:block; |
| | float:left; | | float:left; |
| − | font-family:'Open Sans', sans-serif; | + | font-family:'Helvetica', sans-serif; |
| | background-color: #F6F6E3; | | 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 { | | .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; | | border-bottom: 0px; |
| | color: #2C2C2C; | | color: #2C2C2C; |
| Line 143: |
Line 47: |
| | } | | } |
| | | | |
| − | #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{ |
| | + | 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; | | 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 102: |
| | </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="#">
| |
| − | <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 396: |
Line 107: |
| | <!-- 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"> | + | <img width="25%" src="https://static.igem.org/mediawiki/2017/3/3d/T--NTHU_Taiwan--Project--gear.png"> |
| | <div style="text-align: center"> | | <div style="text-align: center"> |
| | <h1 style="color:#DF6A6A">Demonstrate | | <h1 style="color:#DF6A6A">Demonstrate |
| Line 403: |
Line 114: |
| | <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/6/6e/T--NTHU_Taiwan--Demonstarte--Model_Prototype.jpg"> |
| | | | |
| | + | <p> |
| | + | <center> |
| | + | <font size="2"> |
| | + | Farmland System Demo Model |
| | + | </font> |
| | + | </center> |
| | + | </p> |
| | | | |
| | | | |
| − | <h1 align="center">
| |
| − | The Smart EDC Farmland Protection System
| |
| − | </h1>
| |
| | | | |
| − | <img width="25%" src="https://static.igem.org/mediawiki/2017/f/f0/T--NTHU_Taiwan--AppliedDesign--FarmlandComputerModel.png"> | + | <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> |
| | | | |
| − | <p> | + | |
| − | Integrated system of endocrine disrupting chemicals (EDCs) water protection system.
| + | |
| − | </p>
| + | |
| | | | |
| − | <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 size=4>
| + | </font></p><br> |
| − | 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.
| + | |
| − | </font></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">
| |
| | | | |
| − | <p align="center">
| |
| − | System flow chart of our EDCs water protection sysetm.
| |
| − | </p>
| |
| | | | |
| − | <p> | + | <video style="display:block; margin: 0 auto;" width="90%" 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> |
| − | 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.
| + | |
| − | </font> </p>
| + | |
| | | | |
| − | <p>
| |
| − | <font size=4>
| |
| − | 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.
| |
| − | </font></p>
| |
| | | | |
| | | | |
| − | <p align="center"> | + | <p>< center><font size= "2"> |
| − | <b> | + | Integrated System Demo Video |
| − | <font size=4> | + | </font></center></p><br><br><br> |
| − | IoT System and App
| + | |
| − | </b> | + | |
| − | </p> | + | |
| | | | |
| − | <p><font size=4>
| + | |
| − | 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.
| + | |
| − | </font></p>
| + | |
| | | | |
| − | <p align="center">
| |
| − | <font size=4>
| |
| − | <b>
| |
| − | The IoT System
| |
| − | </font></p>
| |
| − | </b>
| |
| − | </p>
| |
| | | | |
| − | <p><font size=4>
| |
| − | <b>
| |
| − | Why IoT?
| |
| − | </b>
| |
| − | </font></p>
| |
| | | | |
| − | <p><font size=4> | + | <img width="50%" src="https://static.igem.org/mediawiki/2017/f/f0/T--NTHU_Taiwan--AppliedDesign--FarmlandComputerModel.png"> |
| − | 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></p>
| + | |
| | | | |
| − | <p><font size=4> | + | |
| − | 1. Sensors (temperature, PH detector) collect data to our controller.
| + | <center> |
| − | </font></p> | + | <font size="2"> |
| | + | Integrated system of endocrine disrupting chemicals (EDCs) water protection system. |
| | + | </font> |
| | + | </center> |
| | + | </p> |
| | + | <br><br> |
| | | | |
| − | <p><font size=4>
| |
| − | 2. Controller upload data to cloud through wifi.
| |
| − | </font></p>
| |
| | | | |
| − | <p><font size=4>
| |
| − | <b>
| |
| − | What have been used?
| |
| − | </b>
| |
| − | </font></p>
| |
| | | | |
| − | <p><font size=4>
| |
| − | <b>
| |
| − | Cloud Platform : MediaTek Cloud Sandbox
| |
| − | </b>
| |
| − | </font></p>
| |
| | | | |
| − | <p><font size=4>
| |
| − | We created an account on MediaTek Cloud Sandbox, therefore, our data will be going there.
| |
| − | </font></p>
| |
| | | | |
| − | <p><font size=4> | + | <img width="50%" src="https://static.igem.org/mediawiki/2017/d/d9/T--NTHU_Taiwan--Applied_Design--System_Flow_Chart.png"> |
| − | 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></p>
| + | |
| | | | |
| − | <p><font size=4> | + | <p ><center><font size= "2"> |
| − | <b>
| + | System flow chart of our EDCs water protection sysetm. |
| − | Controller and Sensors
| + | </font></center></p> |
| − | </b> | + | |
| − | </font></p> | + | |
| | | | |
| − | <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>
| |
| | | | |
| | | | |
| − | <p><font size=4>
| + | |
| − | 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><font size=4>
| |
| − | <b>
| |
| − | How we do this?
| |
| − | </b>
| |
| − | </font></p>
| |
| | | | |
| − | <p><font size=4> | + | <center><h2>IoT System and App</h2></center> |
| − | <b>
| + | |
| − | Step 1: Sensors collect data to our controller
| + | |
| − | </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.
| + | 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. |
| − | </font></p> | + | </p><br><br><br> |
| | | | |
| | | | |
| − | <p> | + | <h2>The App Design</h2> |
| − | <img src="https://static.igem.org/mediawiki/2017/6/60/T--NTHU_Taiwan--Applied_Design--IoT_step1_code.png"> | + | |
| − | </p>
| + | |
| | | | |
| − | <p align="center"> | + | <h2>Why we built this APP?</h2> |
| − | <font size=1>
| + | |
| − | (Figure 1)
| + | |
| − | </font></p>
| + | |
| | | | |
| − | <p><font size=4> | + | |
| − | <b>
| + | 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. |
| − | Step 2: Controller upload data to cloud through wifi
| + | </p><br><br> |
| − | </b> | + | |
| − | </font></p> | + | |
| | | | |
| − | <p><font size=4> | + | <h2> |
| − | 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.
| + | How do we build our APP? |
| − | </font></p> | + | </h2> |
| | | | |
| − | <p> | + | |
| − | <img src="https://static.igem.org/mediawiki/2017/1/1a/T--NTHU_Taiwan--Applied_design--IoT_step2_code.png">
| + | The software we use is Android Studio. And we manage to represent our detection data in the following ways: |
| − | </p> | + | </p> |
| | | | |
| | + | <p> |
| | + | Tab1: Periodically detection value from a single detection point. |
| | + | </p> |
| | | | |
| − | <p align="center"> | + | |
| − | <font size=1>
| + | Tab2: Historical monitoring data from a single detection point. |
| − | (Figure 2)
| + | </p> |
| − | </font></p>
| + | |
| | | | |
| − | <video class='center' width="50%" src="https://static.igem.org/mediawiki/2017/3/33/T--NTHU_Taiwan--test.mp4" controls></video> | + | <p> |
| | + | Tab3: The distribution of all detection points and their visualized EDC concentrations. |
| | + | </p> |
| | | | |
| − | <p align="center"> | + | |
| − | <font size=1>
| + | 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: |
| − | IoT Demo Video | + | </p> |
| − | </font></p>
| + | |
| | | | |
| − | <p align="center"> | + | |
| − | <font size=4>
| + | 1. Get JSON file from server. |
| − | <b>
| + | </p> |
| − | The App Design
| + | |
| − | </font>
| + | |
| − | </b>
| + | |
| − | </p> | + | |
| | | | |
| − | <p><font size=4> | + | |
| − | <b>
| + | 2. Parse JSON to retrieve specific data. |
| − | Why we built this APP?
| + | </p> |
| − | </b>
| + | |
| − | </font></p>
| + | |
| | | | |
| − | <p><font size=4> | + | |
| − | 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.
| + | 3. Display. |
| − | </font></p>
| + | </p> |
| | | | |
| − | <p><font size=4> | + | |
| − | <b>
| + | Now we will go through those steps one by one : |
| − | How do we build our APP?
| + | </p> |
| − | </b>
| + | |
| − | </font></p>
| + | |
| | | | |
| − | <p><font size=4> | + | |
| − | The software we use is Android Studio. And we manage to represent our detection data in the following ways:
| + | 1. Get JSON file from server |
| − | </font></p>
| + | </p> |
| | | | |
| − | <p><font size=4> | + | |
| − | Tab1: Real-time detection value from a single detection point.
| + | 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> | + | |
| − | Tab2: Historical monitoring data from a single detection point.
| + | (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>
| + | |
| − | Tab3: The distribution of all detection points and their visualized EDC concentrations.
| + | |
| − | </font></p>
| + | |
| | | | |
| − | <p><font size=4> | + | <video style="display:block; margin: 0 auto;" width="90%" controls> |
| − | 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:
| + | <source src="https://static.igem.org/mediawiki/2017/8/8e/T--NTHU_Taiwan--Applied_Design--App_Demo_Video.mp4" type="video/mp4"> |
| − | </font></p>
| + | </video> |
| | | | |
| − | <p><font size=4>
| |
| − | 1. Get JSON file from server.
| |
| − | </font></p>
| |
| | | | |
| − | <p><font size=4> | + | <p ><center><font size= "2"> |
| − | 2. Parse JSON to retrieve specific data.
| + | App Demo Video |
| − | </font></p> | + | </font></center></p> |
| | | | |
| − | <p><font size=4>
| |
| − | 3. Display.
| |
| − | </font></p>
| |
| | | | |
| − | <p><font size=4>
| |
| − | Now we will go through those steps one by one :
| |
| − | </font></p>
| |
| | | | |
| − | <p><font size=4>
| |
| − | 1. Get JSON file from server
| |
| − | </font></p>
| |
| | | | |
| − | <p><font size=4>
| + | </div> |
| − | 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><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>
| + | |
| − | <img src="https://static.igem.org/mediawiki/2017/f/f3/T--NTHU_Taiwan--Applied_Design--App_Design_Code1.png">
| + | |
| − | </p>
| + | |
| − | | + | |
| − | <p align="center">
| + | |
| − | <font size=1>
| + | |
| − | (Figure 1)
| + | |
| − | </font></p>
| + | |
| − | | + | |
| − | <p>
| + | |
| − | <img src="https://static.igem.org/mediawiki/2017/e/e3/T--NTHU_Taiwan--Applied_Design--App_Design_Code2.png">
| + | |
| − | </p>
| + | |
| − | | + | |
| − | <p align="center">
| + | |
| − | <font size=1>
| + | |
| − | (Figure 2)(Part of our code)
| + | |
| − | </font></p>
| + | |
| − | | + | |
| − | <p><font size=4>
| + | |
| − | 2. Parse JSON to retrieve specific data
| + | |
| − | </font></p>
| + | |
| − | | + | |
| − | <p><font size=4>
| + | |
| − | 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)
| + | |
| − | </font></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>
| + | |
| − | <img src="https://static.igem.org/mediawiki/2017/9/95/T--NTHU_Taiwan--Applied_Design--App_Design_Code3.png">
| + | |
| − | </p>
| + | |
| − | | + | |
| − | <p align="center">
| + | |
| − | <font size=1>
| + | |
| − | (Figure 3)
| + | |
| − | </font></p>
| + | |
| − | | + | |
| − | <p><font size=4>
| + | |
| − | 3. Display
| + | |
| − | </font></p>
| + | |
| − | | + | |
| − | <p><font size=4>
| + | |
| − | And finally, here is how we represent our data.
| + | |
| − | </font></p>
| + | |
| − | | + | |
| − | <p><font size=4>
| + | |
| − | 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>
| + | |
| − | | + | |
| − | <p>
| + | |
| − | <img src="https://static.igem.org/mediawiki/2017/a/a4/T--NTHU_Taiwan--Applied_Design--App_Design_Code4.png">
| + | |
| − | </p>
| + | |
| − | | + | |
| − | <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>
| + | |
| − | | + | |
| − | <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><font size=4>
| + | |
| − | <img src="https://static.igem.org/mediawiki/2017/5/5d/T--NTHU_Taiwan--Applied_Design--App_Design_UI1.png">
| + | |
| − | </p>
| + | |
| − | | + | |
| − | <p><font size=4>
| + | |
| − | And 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>
| + | |
| − | | + | |
| − | <p>
| + | |
| − | <img src="https://static.igem.org/mediawiki/2017/4/42/T--NTHU_Taiwan--Applied_Design--App_Design_UI2.png">
| + | |
| − | </p>
| + | |
| − | | + | |
| − | | + | |
| − | <video class='center' width="50%" src=" https://static.igem.org/mediawiki/2017/8/8e/T--NTHU_Taiwan--Applied_Design--App_Demo_Video.mp4" controls></video>
| + | |
| − | | + | |
| − | <p align="center">
| + | |
| − | <font size=1>
| + | |
| − | App Demo Video
| + | |
| − | </font>
| + | |
| − | </p>
| + | |
| − | | + | |
| − | | + | |
| − | </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> |
