Oscarliu117 (Talk | contribs) |
|||
Line 11: | Line 11: | ||
<div class="col-2 side"> | <div class="col-2 side"> | ||
<div id="sidelist" class="list-group"> | <div id="sidelist" class="list-group"> | ||
− | <a class="list-group-item list-group-item-action" href="#list-item-1">Arduino</a> | + | <a class="list-group-item list-group-item-action" href="#list-item-1">Arduino code</a> |
− | <a class="list-group-item list-group-item-action" href="#list-item-2"> | + | <a class="list-group-item list-group-item-action" href="#list-item-2">Temperature</a> |
<a class="list-group-item list-group-item-action" href="#list-item-3">Database</a> | <a class="list-group-item list-group-item-action" href="#list-item-3">Database</a> | ||
<a class="list-group-item list-group-item-action" href="#list-item-4">App</a> | <a class="list-group-item list-group-item-action" href="#list-item-4">App</a> | ||
− | <a class="list-group-item list-group-item-action" href="#list-item-5"> | + | <a class="list-group-item list-group-item-action" href="#list-item-5">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> | <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> | ||
Line 23: | Line 23: | ||
<div class="container"> | <div class="container"> | ||
<div id="list-item-1"> | <div id="list-item-1"> | ||
− | <h3>Arduino</h3> | + | <h3>Arduino code</h3> |
− | <p | + | <p>We use temperature sensor(DS18B20)、pH meter and CO2 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> | ||
+ | <script src="https://gist.github.com/yiiju/62d0249edc790f0cbb59bbc45060dc43.js"></script> | ||
</div> | </div> | ||
<div id="list-item-2"> | <div id="list-item-2"> | ||
− | <h3> | + | <h3>Temperature experimental verification</h3> |
− | < | + | <h5 class="smalltitle">Data Fitting</h5> |
+ | <ol> | ||
+ | <li>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>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>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>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=""> | ||
+ | <img class="contentimg col-6" src=""> | ||
+ | <img class="contentimg col-6" src=""> | ||
+ | <img class="contentimg col-6" src=""> | ||
+ | <img class="contentimg col-6" src=""> | ||
+ | <img class="contentimg col-6" src=""> | ||
+ | <img class="contentimg col-6" src=""> | ||
+ | <img class="contentimg col-6" src=""> | ||
+ | <img class="contentimg" src="picture/temperature9.jpg"> | ||
+ | <p>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 third image as the curve of analog signal and temperature conversion. | ||
+ | </p> | ||
</div> | </div> | ||
<div id="list-item-3"> | <div id="list-item-3"> | ||
<h3>Database</h3> | <h3>Database</h3> | ||
− | < | + | <h5>Why we need to use database?</h5> |
− | <img class="contentimg" src=" | + | <p>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>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>We divide the following instructions into two parts, | ||
+ | register firebase and create Firebase project.</p> | ||
+ | <h5>Register firebase</h5> | ||
+ | <ol> | ||
+ | <li>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>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="picture/firebase1.png"> | ||
+ | <h5>Create Firebase project</h5> | ||
+ | <ol> | ||
+ | <li>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="picture/firebase2.png"> | ||
+ | <li>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="picture/firebase3.png"> | ||
+ | <p>Finally, you can wait for Arduino to send data by wi-fi to the database.</p> | ||
+ | </ol> | ||
</div> | </div> | ||
<div id="list-item-4"> | <div id="list-item-4"> | ||
<h3>App</h3> | <h3>App</h3> | ||
− | <p | + | <p>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> |
− | <p class=" | + | <div class="row"> |
+ | <div class="col-md-6 col-md-push-6"> | ||
+ | <p style="margin-top: 200px">This is our homepage, with our lovely logo. | ||
+ | You can click “START” button to start monitor the CO2, pH and temperature data. | ||
+ | Also, 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=""> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="row"> | ||
+ | <div class="col-md-6"> | ||
+ | <p>This is the picture when you click ” START”. There are three buttons, | ||
+ | which is CO2, 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>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=""> | ||
+ | </div> | ||
+ | <div class="col-md-6 appdiv"> | ||
+ | <img class="appimg" src=""> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="row"> | ||
+ | <div class="col-md-6"> | ||
+ | <p>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>When the data is abnormal, it will give a warning notice to let the user knows.</p> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="row"> | ||
+ | <div class="col-md-6 appdiv"> | ||
+ | <img class="appimg" src=""> | ||
+ | </div> | ||
+ | <div class="col-md-6 appdiv"> | ||
+ | <img class="appimg" src=""> | ||
+ | </div> | ||
+ | </div> | ||
+ | <p>See the code on <a class="link" href="https://github.com/yiiju/CO2_Detection" target="_blank">Github</a></p> | ||
</div> | </div> | ||
<div id="list-item-5"> | <div id="list-item-5"> | ||
− | <h3> | + | <h3>NCKU Bike Festival interactive game</h3> |
− | <p | + | <p><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>Click “start” to start playing the game.</p> | ||
+ | </div> | ||
+ | <div class="col-md-6 appdiv"> | ||
+ | <img class="appimg" src=""> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="row"> | ||
+ | <div class="col-md-6"> | ||
+ | <p>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="appimg" src=""> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="row"> | ||
+ | <div class="col-md-6"> | ||
+ | <p>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="appimg" src=""> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="row"> | ||
+ | <div class="col-md-6"> | ||
+ | <p>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 calss="appimg" src=""> | ||
+ | </div> | ||
+ | </div> | ||
+ | <p>See the code on the <a class="link" href="https://github.com/elieen840626/iGEM_Game-for-NCKU-BIKE-FESTIVAL">Github</a></p> | ||
</div> | </div> | ||
</div> | </div> |
Revision as of 07:02, 10 September 2018