(64 intermediate revisions by 8 users not shown) | |||
Line 1: | Line 1: | ||
{{NCKU_Tainan/header}} {{NCKU_Tainan/navbar}} {{NCKU_Tainan/style}} | {{NCKU_Tainan/header}} {{NCKU_Tainan/navbar}} {{NCKU_Tainan/style}} | ||
<html> | <html> | ||
− | + | ||
− | + | <head> | |
− | + | <link rel="stylesheet" href="https://2018.igem.org/Template:NCKU_Tainan/css/software?action=raw&ctype=text/css"> | |
− | + | </head> | |
− | + | ||
− | <h1 class="head">Software</h1> | + | <body data-spy="scroll" data-target=".navbar-example"> |
− | <div class="navbar-example"> | + | <div class="container content"> |
− | + | <div class="headstyle"> | |
− | + | <h1 class="head">Software</h1> | |
− | + | </div> | |
− | + | <div class="righttitle"> | |
− | + | <h6 class="subtitle">Behind The Screen</h6> | |
− | + | </div> | |
− | + | <div class="navbar-example"> | |
− | + | <div class="row"> | |
− | + | <div class="col-2 side"> | |
+ | <div id="sidelist" class="list-group"> | ||
+ | <a class="list-group-item list-group-item-action" href="#IoT">IoT</a> | ||
+ | <a class="list-group-item list-group-item-action" href="#Arduino_code">Arduino Code</a> | ||
+ | <a class="list-group-item list-group-item-action" href="#Temperature">Temperature</a> | ||
+ | <a class="list-group-item list-group-item-action" href="#Database">Database</a> | ||
+ | <a class="list-group-item list-group-item-action" href="#App">App</a> | ||
+ | <a class="list-group-item list-group-item-action" href="#NCKU_Bike_Festival">NCKU Bike Festival</a> | ||
+ | <a class="list-group-item list-group-item-action" href="#"><i class="fa fa-arrow-up fa-1x" | ||
+ | aria-hidden="true"></i></a> | ||
</div> | </div> | ||
− | + | </div> | |
− | + | <div class="col-10"> | |
− | + | <div data-spy="scroll" data-target="#sidelist" data-offset="0" class="scrollspy-example"> | |
− | + | <div class="container"> | |
− | + | <div id="IoT"> | |
− | <img class=" | + | <h3>IoT</h3> |
− | <p>We use temperature sensor(DS18B20) | + | <p class="pcontent"> |
+ | We implemented an IoT by Arduino, Firebase and Android Studio. | ||
+ | For Arduino, we use <a class="link" href="https://2018.igem.org/Team:NCKU_Tainan/Temperature">temperature | ||
+ | sensor (DS18B20)</a>、<a class="link" href="https://2018.igem.org/Team:NCKU_Tainan/pH_meter">pH | ||
+ | meter</a> and <a class="link" href="https://2018.igem.org/Team:NCKU_Tainan/CO2">CO<sub>2</sub> | ||
+ | sensor (MG811)</a> to monitor our device. | ||
+ | Also we use LCD to print data and use <a class="link" href="https://2018.igem.org/Team:NCKU_Tainan/wi_fi">Wi-Fi | ||
+ | sensor (NodeMcu)</a> to upload our records to database (Firebase) as well. | ||
+ | We use Wi-Fi sensor to get current time and we send it to the Arduino so that it | ||
+ | can print it out on Arduino. | ||
+ | Also we send the temperature, pH and temperature data, which is on the Arduino, to | ||
+ | the NodeMcu. | ||
+ | Then we use the NodeMcu to send the data to firebase. | ||
+ | </p> | ||
+ | <div id="centerimg"> | ||
+ | <img class="oneimg" src="https://static.igem.org/mediawiki/2018/3/3f/T--NCKU_Tainan--software_IoT.jpg"> | ||
+ | </div> | ||
+ | <p class="pcontent">For user-friendly, user can read the data easily from the App. | ||
+ | When the data is abnormal, the App would have a caution to let the user know, | ||
+ | so that the user can adjust the device in time. | ||
+ | </p> | ||
+ | </div> | ||
+ | <div id="Arduino_code"> | ||
+ | <h3>Arduino code</h3> | ||
+ | <p class="pcontent">We use temperature sensor (DS18B20), pH meter and CO<sub>2</sub> | ||
+ | sensor (MG811) to monitor our device. | ||
+ | Besides, we use LCD to print datum and use Wi-Fi sensor (ESP8266) to upload our | ||
+ | records to database as well. | ||
+ | (You can see more information about Arduino in <a class="link" href="https://2018.igem.org/Team:NCKU_Tainan/Hardware">hardware</a>) | ||
+ | </p> | ||
+ | <div style="overflow: auto; width:100%; height:250px; background-color:#272625; border:3px solid #a6a6a6;"> | ||
+ | <script src="https://gist.github.com/yiiju/62d0249edc790f0cbb59bbc45060dc43.js"></script> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div id="Temperature"> | ||
+ | <h3>Temperature experimental curve fitting</h3> | ||
+ | <h5 class="smalltitle">Data Fitting</h5> | ||
+ | <ol> | ||
+ | <li class="licontent">Given a set of data (including input and output), create a | ||
+ | mathematical model to approximate the input and output characteristics of this | ||
+ | data.</li> | ||
+ | <li class="licontent">If the data contains one-dimensional inputs and outputs, the | ||
+ | mathematical model can be expressed as a curve, which in this case is also | ||
+ | called curve fitting.</li> | ||
+ | </ol> | ||
+ | <p class="pcontent">Therefore, we use the temperature of the thermostat (incubation) on | ||
+ | the market and the analog signal sensed by Arduino as the basis for the temperature | ||
+ | calibration curve.</p> | ||
+ | <br> | ||
+ | <p class="pcontent">Since the error value of the temperature sensing device is not | ||
+ | necessarily, we use multiple sampling methods, and then average the values measured | ||
+ | in each temperature interval to reduce the error value without excessive error. | ||
+ | We use the above method to take 150 strokes as training data, and use the basic | ||
+ | accessories of MATLAB to find the appropriate nine temperature model formulas. | ||
+ | </p> | ||
+ | <img class="contentimg col-6" src="https://static.igem.org/mediawiki/2018/0/0b/T--NCKU_Tainan--software_temperature1.png"> | ||
+ | <img class="contentimg col-6" src="https://static.igem.org/mediawiki/2018/9/95/T--NCKU_Tainan--software_temperature2.png"> | ||
+ | <img class="contentimg col-6" src="https://static.igem.org/mediawiki/2018/e/e3/T--NCKU_Tainan--software_temperature4.png"> | ||
+ | <img class="contentimg col-6" src="https://static.igem.org/mediawiki/2018/2/2f/T--NCKU_Tainan--software_temperature5.png"> | ||
+ | <img class="contentimg col-6" src="https://static.igem.org/mediawiki/2018/6/63/T--NCKU_Tainan--software_temperature6.png"> | ||
+ | <img class="contentimg col-6" src="https://static.igem.org/mediawiki/2018/4/4d/T--NCKU_Tainan--software_temperature9.png"> | ||
+ | <img class="trueimg" src="https://static.igem.org/mediawiki/2018/b/b8/T--NCKU_Tainan--software_temperature3.png"> | ||
+ | <p class="pcontent">From the graph we can see that the more parameters the model | ||
+ | contains, | ||
+ | the smaller the square error will be. Therefore, if the number of parameters is | ||
+ | equal to the number of data points, | ||
+ | the squared error will be equal to zero, but this does not mean that the prediction | ||
+ | will be the most accurate, | ||
+ | because the data points contain noise. The model that completely matches the data | ||
+ | also means that the model is most affected by noise. | ||
+ | The accuracy will also be poor. In addition, the more model parameters, the higher | ||
+ | the time complexity, | ||
+ | so we use the last image (cubic) as the curve of analog signal and temperature | ||
+ | conversion. Because the instantaneous temperature does not only contain the exact | ||
+ | value of the time complexity can not be too high. | ||
+ | </p> | ||
+ | </div> | ||
+ | <div id="Database"> | ||
+ | <h3>Database</h3> | ||
+ | <h5>Why we need to use database?</h5> | ||
+ | <p class="pcontent">Save data from our device, including carbon dioxide concentration, | ||
+ | pH value and temperature obtained by sensors in our device. Besides, | ||
+ | the App can fetch the information from our database. | ||
+ | </p> | ||
+ | <h5>What database we use?</h5> | ||
+ | <p class="pcontent">We use Firebase to be our database. | ||
+ | Because it is a realtime database and a 3rd party Authentication | ||
+ | (Google Signin, Facebook Login, Github, Twitter). Last but not least, | ||
+ | its cloud messaging can send push messages to any device, so we can easily send it | ||
+ | to our App. | ||
+ | Based on above reason, we choose Firebase.</p> | ||
+ | <h5>How to create a Firebase?</h5> | ||
+ | <p class="pcontent">We divide the following instructions into two parts, | ||
+ | register firebase and create Firebase project.</p> | ||
+ | <h5>Register firebase</h5> | ||
+ | <ol> | ||
+ | <li class="licontent">The quickest way to use Firebase is to sign in with your old | ||
+ | Google Account and get started. | ||
+ | Sign up and then go to the website. | ||
+ | <br> | ||
+ | Register Firebase account | ||
+ | <br> | ||
+ | Go to the Firebase homepage: http://firebase.google.com and find the "Login" | ||
+ | link registered with Google as shown below in the homepage. | ||
+ | </li> | ||
+ | <li class="licontent">After signing in to your Google Account, you will be prompted | ||
+ | to confirm your permissions. | ||
+ | Click "Allow" to complete the registration of Firebase, | ||
+ | then click "GET STARTED" on the page to start using Firebase, as shown below:</li> | ||
+ | </ol> | ||
+ | <img class="contentimg" src="https://static.igem.org/mediawiki/2018/c/ca/T--NCKU_Tainan--software_firebase1.png"> | ||
+ | <h5>Create Firebase project</h5> | ||
+ | <ol> | ||
+ | <li class="licontent">The first thing to enter the Firebase console is to create a | ||
+ | Firebase project and try out the free program. | ||
+ | After entering the console, please click on “Add Project” to create a new | ||
+ | project, as shown below: | ||
+ | </li> | ||
+ | <img class="smallimg" src="https://static.igem.org/mediawiki/2018/7/7c/T--NCKU_Tainan--software_firebase2.png"> | ||
+ | <li class="licontent">Enter the project name of the App, such as “project”, | ||
+ | and then select the country/region, then click “Create Project” as shown below: | ||
+ | </li> | ||
+ | <img class="smallimg" src="https://static.igem.org/mediawiki/2018/1/1f/T--NCKU_Tainan--software_firebase3.png"> | ||
+ | <p class="pcontent">Finally, you can wait for Arduino to send data by Wi-Fi to the | ||
+ | database.</p> | ||
+ | </ol> | ||
+ | </div> | ||
+ | <div id="App"> | ||
+ | <h3>App</h3> | ||
+ | <p class="pcontent">To make our device more user-friendly, we designed an App to get | ||
+ | data from our database. The manager of the factory can easily see the data | ||
+ | immediately. Besides, we set up a notification system. As long as users connect | ||
+ | their smart phone to the internet, they can immediately get the warning | ||
+ | notification from the device if the data goes wrong.</p> | ||
+ | <div class="row"> | ||
+ | <div class="col-md-6 col-md-push-6"> | ||
+ | <p class="pcontent" style="margin-top: 200px">This is our homepage, with our | ||
+ | lovely logo. | ||
+ | You can click “START” button to start monitor the CO<sub>2</sub>, pH and | ||
+ | temperature data. | ||
+ | Also, you can click “SWITCH” button to control the input of the collection | ||
+ | tank or | ||
+ | output of medium tank. Furthermore, you can click “ABOUT US” button to | ||
+ | learn more about our project. Last but not least, | ||
+ | clicking the footprint, you can visit our wiki. | ||
+ | </p> | ||
+ | </div> | ||
+ | <div class="col-md-6 col-md-pull-6 appdiv"> | ||
+ | <img class="appimg" src="https://static.igem.org/mediawiki/2018/8/85/T--NCKU_Tainan--software_app1.png"> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="row"> | ||
+ | <div class="col-md-6"> | ||
+ | <p class="pcontent">This is the picture when you click ” START”. There are | ||
+ | three buttons, | ||
+ | which is CO<sub>2</sub>, pH and temperature respectively. | ||
+ | You can click any of the buttons to look at the changes with line chart | ||
+ | within ten hours. | ||
+ | </p> | ||
+ | </div> | ||
+ | <div class="col-md-6"> | ||
+ | <p class="pcontent">This is the picture when you press “ABOUT US”. It is a | ||
+ | brief description about our project. | ||
+ | You can choose whether you want to receive an exception warning | ||
+ | notification or not. | ||
+ | Also, you can click the green arrow to go back to the main page. | ||
+ | </p> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="row"> | ||
+ | <div class="col-md-6 appdiv"> | ||
+ | <img class="appimg" src="https://static.igem.org/mediawiki/2018/2/29/T--NCKU_Tainan--software_app2.png"> | ||
+ | </div> | ||
+ | <div class="col-md-6 appdiv"> | ||
+ | <img class="appimg" src="https://static.igem.org/mediawiki/2018/8/86/T--NCKU_Tainan--software_app3.png"> | ||
+ | </div> | ||
</div> | </div> | ||
− | <div | + | |
− | + | ||
− | < | + | <div class="row"> |
+ | <div class="col-md-6"> | ||
+ | <p class="pcontent">Take the pH value for instance, the current value will be | ||
+ | displayed above, | ||
+ | and the line chart will display the last ten hours of data, which fetching | ||
+ | data from the database. | ||
+ | </p> | ||
+ | </div> | ||
+ | <div class="col-md-6"> | ||
+ | <p class="pcontent">When the data is abnormal, it will give a warning notice to | ||
+ | let the user knows.</p> | ||
+ | </div> | ||
</div> | </div> | ||
− | <div | + | <div class="row"> |
− | < | + | <div class="col-md-6 appdiv"> |
− | + | <img class="appimg" src="https://static.igem.org/mediawiki/2018/4/41/T--NCKU_Tainan--software_app4.png"> | |
− | + | </div> | |
− | <img class=" | + | <div class="col-md-6 appdiv"> |
+ | <img class="appimg" src="https://static.igem.org/mediawiki/2018/c/cf/T--NCKU_Tainan--software_app5.png"> | ||
+ | </div> | ||
</div> | </div> | ||
− | <div | + | <div class="row"> |
− | < | + | <div class="col-md-6 col-md-push-6"> |
− | + | <p class="pcontent" style="margin-top: 200px">We aim to simulate the situation | |
− | <a class="link" href="https://github.com/yiiju/CO2_Detection" target="_blank">Github</a> | + | in the factory. First of all, we put the electromagnetic valves to the |
+ | input of collection tank and output of medium tank, so that we can control | ||
+ | the switches easier by app. In reality, they can be controlled | ||
+ | automatically. Therefore, this is what we want to achieve. | ||
+ | </p> | ||
+ | </div> | ||
+ | <div class="col-md-6 col-md-pull-6 appdiv"> | ||
+ | <img class="appimg" src="https://static.igem.org/mediawiki/2018/1/1d/T--NCKU_Tainan--Electromagnetic_valve.jpg"> | ||
+ | </div> | ||
+ | |||
+ | <p class="pcontent">See the code on <a class="link" href="https://github.com/yiiju/CO2_Detection" | ||
+ | target="_blank">Github</a></p> | ||
</div> | </div> | ||
− | <div id=" | + | <div id="NCKU_Bike_Festival"> |
− | <h3> | + | <h3>NCKU Bike Festival Interactive Game</h3> |
+ | <p class="pcontent"><a class="link" href="">NCKU Bike Festival</a> is a famous | ||
+ | activity for NCKU to exhibit and introduce every college department to south | ||
+ | Taiwan senior high students. | ||
+ | We take this opportunity to promote synthetic biology, | ||
+ | promote iGEM and introduce our three candidate topics, hoping to get different | ||
+ | opinions. | ||
+ | We designed a bio-related game quiz about synthetic biology, iGEM, and high | ||
+ | school basic biology. | ||
+ | The system will randomly generate five questions. After the answer, the | ||
+ | questions will be displayed correctly and incorrectly. | ||
+ | At this time, we will tell them why they made a mistake. After the explanation, | ||
+ | they can choose “re-challenge” or “all know” to enter the next step. | ||
+ | Before the end of the game, there will be a vote for our three candidate | ||
+ | projects, | ||
+ | which will be used to calculate which topics are generally of high interest to | ||
+ | high school students. | ||
+ | </p> | ||
+ | <div class="row"> | ||
+ | <div class="col-md-6"> | ||
+ | <p class="pcontent" style="margin-top: 110px; margin-left: 50px;">Click | ||
+ | “start” to start playing the game.</p> | ||
+ | </div> | ||
+ | <div class="col-md-6 appdiv"> | ||
+ | <img class="bikeimg" src="https://static.igem.org/mediawiki/2018/f/f2/T--NCKU_Tainan--software_festival1.png"> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="row"> | ||
+ | <div class="col-md-6"> | ||
+ | <p class="pcontent" style="margin-top: 110px; margin-left: 50px;">There are | ||
+ | five questions about synthetic biology and iGEM. | ||
+ | After finishing the five questions, click “finish” to see where’s | ||
+ | wrong.</p> | ||
+ | </div> | ||
+ | <div class="col-md-6 appdiv"> | ||
+ | <img class="bikeimg" src="https://static.igem.org/mediawiki/2018/a/a6/T--NCKU_Tainan--software_festival2.png"> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="row"> | ||
+ | <div class="col-md-6"> | ||
+ | <p class="pcontent" style="margin-top: 110px; margin-left: 50px;">Click | ||
+ | “re-challenge” to go back to the main page and start again, | ||
+ | or click “all know” to go to vote for our three candidate projects.</p> | ||
+ | </div> | ||
+ | <div class="col-md-6 appdiv"> | ||
+ | <img class="bikeimg" src="https://static.igem.org/mediawiki/2018/d/da/T--NCKU_Tainan--software_festival3.png"> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="row"> | ||
+ | <div class="col-md-6"> | ||
+ | <p class="pcontent" style="margin-top: 110px; margin-left: 50px;">This is | ||
+ | our three candidate projects. After choosing it, click “finish” to go | ||
+ | back to the main page.</p> | ||
+ | </div> | ||
+ | <div class="col-md-6 appdiv"> | ||
+ | <img class="bikeimg" src="https://static.igem.org/mediawiki/2018/9/99/T--NCKU_Tainan--software_festival4.png"> | ||
+ | </div> | ||
+ | </div> | ||
+ | <p class="pcontent">See the code on the <a class="link" href="https://github.com/elieen840626/iGEM_Game-for-NCKU-BIKE-FESTIVAL" | ||
+ | target="_blank">Github</a></p> | ||
</div> | </div> | ||
</div> | </div> | ||
Line 50: | Line 317: | ||
</div> | </div> | ||
</div> | </div> | ||
− | + | </div> | |
− | $(document).ready(function() { | + | |
− | + | <script> | |
− | + | $(document).ready(function () { | |
− | + | $(window).scroll(function () { | |
− | + | var scrollPercentage = (document.documentElement.scrollTop + document.body.scrollTop) / | |
− | + | (document.documentElement.scrollHeight - document.documentElement.clientHeight); | |
− | + | if (scrollPercentage >= 0.97) { | |
− | + | var position = $("#sidelist").position(); | |
− | + | if (position == undefined) {} else { | |
− | + | $('#sidelist').css({ | |
− | } | + | "position": "fixed", |
− | + | "top": "105px" | |
+ | }); | ||
+ | } | ||
+ | } else { | ||
+ | if ($(this).scrollTop() >= 500) { | ||
+ | var position = $("#sidelist").position(); | ||
+ | if (position == undefined) {} else { | ||
+ | $('#sidelist').css({ | ||
+ | "position": "fixed", | ||
+ | "top": "145px", | ||
+ | "margin-top": "0px" | ||
+ | }); | ||
+ | } | ||
+ | } else { | ||
+ | $('#sidelist').removeAttr('style'); | ||
+ | } | ||
+ | } | ||
+ | }); | ||
+ | $(function () { | ||
+ | $('i.fa-arrow-up').click(function () { | ||
+ | $('html, body').animate({ | ||
+ | scrollTop: 0 | ||
+ | }, 600); | ||
+ | return false; | ||
+ | }); | ||
+ | }); | ||
+ | $(".contentimg").click(function () { | ||
+ | if (this.classList.contains('clicked')) { | ||
+ | $('img').removeClass("clicked"); | ||
+ | this.classList.remove('clicked'); | ||
+ | } else { | ||
+ | $('img').removeClass("clicked"); | ||
+ | this.classList.add('clicked'); | ||
+ | } | ||
+ | }); | ||
}); | }); | ||
− | + | </script> | |
− | + | ||
− | + | <script src="https://2018.igem.org/Team:NCKU_Tainan/js/frame/T--NCKU_Tainan--jquery-1_12_4_min_js?action=raw&ctype=text/javascript"></script> | |
− | + | <script src="https://2018.igem.org/Template:NCKU_Tainan/js/bootstrap_min_js?action=raw&ctype=text/javascript"></script> | |
+ | |||
+ | </body> | ||
+ | |||
</html> | </html> | ||
{{NCKU_Tainan/footer}} | {{NCKU_Tainan/footer}} |
Latest revision as of 13:49, 3 November 2018