Difference between revisions of "Team:Edinburgh/Software"

 
(14 intermediate revisions by 2 users not shown)
Line 1: Line 1:
−
{{Edinburgh_practices}}
+
{{Edinburgh_software}}
 
<html>
 
<html>
  
Line 36: Line 36:
 
                       <li><a href="https://2015.igem.org/Team:Edinburgh/DNPBiosensor">DNP Biosensor</a></li>
 
                       <li><a href="https://2015.igem.org/Team:Edinburgh/DNPBiosensor">DNP Biosensor</a></li>
 
                       <li><a href="https://2015.igem.org/Team:Edinburgh/PMABiosensor">PMA Biosensor</a></li>
 
                       <li><a href="https://2015.igem.org/Team:Edinburgh/PMABiosensor">PMA Biosensor</a></li>
−
                       <li><a href="https://2015.igem.org/Team:Edinburgh/CBD">Making it Stick</a></li>            
+
                       <li><a href="https://2015.igem.org/Team:Edinburgh/CBD">Making it Stick</a></li>            
−
                       <li><a href="https://2015.igem.org/Team:Edinburgh/Results">Results</a></li>
+
                       <li><a href="https://2015.igem.org/Team:Edinburgh/Results">Limits of Detection</a></li>
 
                     </ul>
 
                     </ul>
 
                   </li>
 
                   </li>
Line 43: Line 43:
 
                     <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Parts<span class="caret"></span></a>
 
                     <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Parts<span class="caret"></span></a>
 
                     <ul class="dropdown-menu" role="menu">
 
                     <ul class="dropdown-menu" role="menu">
−
                    <!-- <li><a href="https://2015.igem.org/Team:Edinburgh/Parts">Team Parts</a></li> -->
+
                      <li><a href="https://2015.igem.org/Team:Edinburgh/Parts">Team Parts</a></li>  
 
                       <li><a href="https://2015.igem.org/Team:Edinburgh/Basic_Part">Basic Parts</a></li>
 
                       <li><a href="https://2015.igem.org/Team:Edinburgh/Basic_Part">Basic Parts</a></li>
 
                       <li><a href="https://2015.igem.org/Team:Edinburgh/Composite_Part">Composite Parts</a></li>
 
                       <li><a href="https://2015.igem.org/Team:Edinburgh/Composite_Part">Composite Parts</a></li>
−
                    <!-- <li><a href="https://2015.igem.org/Team:Edinburgh/Part_Collection">Part Collection</a> </li> -->
+
                      <li><a href="https://2015.igem.org/Team:Edinburgh/Part_Collection">Part Collection</a> </li>  
 
                       <li><a href="https://2015.igem.org/Team:Edinburgh/Improved_Part">Improved Parts</a></li>
 
                       <li><a href="https://2015.igem.org/Team:Edinburgh/Improved_Part">Improved Parts</a></li>
 
                       <li><a href="https://2015.igem.org/Team:Edinburgh/Characterisation_Part">Improved Characterisation</a></li>
 
                       <li><a href="https://2015.igem.org/Team:Edinburgh/Characterisation_Part">Improved Characterisation</a></li>
Line 85: Line 85:
 
                     </ul>
 
                     </ul>
 
                   </li>
 
                   </li>
−
                   <li><a href="https://2015.igem.org/Team:Edinburgh/MedalCriteria">Medal Criteria</a></li>   
+
                   <li><a href="https://2015.igem.org/Team:Edinburgh/MedalCriteria">Accomplishments</a></li>   
 
             </ul>
 
             </ul>
 
         </div>
 
         </div>
Line 93: Line 93:
  
 
     <!-- End of menu  -->
 
     <!-- End of menu  -->
−
 
 
<body>
 
<body>
  
−
   
+
      <header class="intro">
−
 
+
−
      <header class="intro">
+
 
         <div class="intro-body">
 
         <div class="intro-body">
 
           <div class="container">
 
           <div class="container">
 
             <div class="row">
 
             <div class="row">
 
               <div class="col-md-12">
 
               <div class="col-md-12">
−
                 <h1 class="brand-heading">Software</h1>
+
                 <h1 class="brand-heading">SOFTWARE</h1>
 
                 <p class="intro-text">
 
                 <p class="intro-text">
−
<br><br>
 
 
                 </p>
 
                 </p>
 +
                <div align="center">
 +
                    <a href="#cd-team">
 +
                        <span class="arrowtext">Scroll down to read more</span>
 +
                        <img src="https://static.igem.org/mediawiki/2014/3/3e/Aalto_Helsinki_Nuoli.png" class="arrow">
 +
                    </a>
 +
                </div>
 
               </div>
 
               </div>
 
             </div>
 
             </div>
Line 113: Line 115:
 
       </header>
 
       </header>
  
−
     
+
<section id="first">
−
    <section id="about">
+
<h2>Overview</h2>
−
        <div class="container">
+
          <p>
−
            <div class="row">
+
The integration of Policy and Practices into the device design led us to explore how we could effectively incorporate software into our project. This led us to the idea of having a smartphone app which would take a photograph and give simple text based results. Having this app would remove the subjectivity of colour detection by eye and also gives us an accurate way to display results.
−
                <div class="col-lg-12 text-center">
+
          </p>
−
                    <h2 class="section-heading">Coming Soon</h2>
+
−
                    <h3 class="section-subheading text-muted">
+
−
                     
+
−
                    </h3>
+
−
                </div>
+
−
            </div>
+
  
 +
</section>
  
 +
<!-- END OVERVIEW -->
 +
 +
<svg id="bigHalfCircle" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100" viewBox="0 0 100 100" preserveAspectRatio="none">
 +
<path d="M0 100 C40 0 60 0 100 100 Z"/>
 +
</svg>
 +
<section class="col-2 color" id="second">
 +
                        <div class="column">
 +
                            <img class="img-responsive" src="https://static.igem.org/mediawiki/2015/3/37/Appproblems.jpeg">
 +
                        </div>
 +
                        <div class="column text">
 +
<h2>The Problems</h2>
 +
          <p>
 +
The idea of the making a smartphone app introduced some hurdles which had to be overcome. We had to ensure the positioning of the biosensor was always fixed relative to the camera, the lighting was controlled and the photo was taken from a distance more than the focal length of the smartphone camera.
 +
          </p>
 +
                        </div>
 +
</section>
 +
<svg id="bigTriangleShadow" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100" viewBox="0 0 100 100" preserveAspectRatio="none">
 +
<path id="trianglePath1" d="M0 0 L50 100 L100 0 Z" />
 +
<path id="trianglePath2" d="M50 100 L100 40 L100 0 Z" />
 +
</svg>
 +
 +
<!-- END PROBLEMS -->
 +
 +
<section class = "col-2">
 +
                            <div class="column text pull-left">
 +
<h2>Biosensor Casing and Enclosure </h2>
 +
        <p>
 +
To solve these problems we decided to make a plastic casing in which you would place the biosensor before application of the sample. We also designed an enclosure into which the casing would slide. The casing made sure that the biosensor was always in the correct position and the enclosure made sure the light was controlled. We designed the top of the enclosure so that the phone can be secured in the optimum position to take the photo. In order to obtain a clear image every time the box was set to be greater than the focal length of the camera. The enclosure and casing are reusable, so as only the paper biosensor needs to be replaced for each different test.
 +
 
 +
                            </div>
 +
                            <div class="column">
 +
                              <img class="img-responsive" src="https://static.igem.org/mediawiki/2015/0/06/Casingandenclosure.jpeg" width="300" hspace="50">
 +
                            </div>
 +
</section>
 +
 +
<!-- END CASING AND ENCLOSURE -->
 +
 +
 +
<svg id="bigHalfCircle" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100" viewBox="0 0 100 100" preserveAspectRatio="none">
 +
<path d="M0 100 C40 0 60 0 100 100 Z"/>
 +
</svg>
 +
<section class="col-2 color">
 +
                        <div class="column">
 +
                            <img class="img-responsive" src="https://static.igem.org/mediawiki/2015/d/d4/Appscreenshot.jpeg" width= "200" >
 +
                        </div>
 +
                        <div class="column text">
 +
<h2>The Smartphone Application</h2>
 +
          <p>
 +
After we finalised the casing and enclosure, we built an application for iPhone 5s, which can be easily modified for use on other phones. We developed it using swift programming language and used Xcode tools to help our development. We tried to use standard and efficient software engineering practices wherever possible. The code can be accessed on the following github link <a href="https://github.com/aseemnarang17/Class-A-fied-App"> here</a>
 +
          </p>
 +
<p>
 +
To use the app all you have to do is slide your iPhone into the enclosure. The app will tell you to take a photo and with just a push of a button you will have accurate and non-subjective results
 +
          </p>
 +
        </div>
 +
</section>
 +
<svg id="bigTriangleShadow" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100" viewBox="0 0 100 100" preserveAspectRatio="none">
 +
<path id="trianglePath1" d="M0 0 L50 100 L100 0 Z" />
 +
<path id="trianglePath2" d="M50 100 L100 40 L100 0 Z" />
 +
</svg>
 +
 +
<!-- END APP -->
 +
 +
</div>
 
</body>
 
</body>
 
</html>
 
</html>

Latest revision as of 18:57, 20 November 2015

gh

SOFTWARE

Overview

The integration of Policy and Practices into the device design led us to explore how we could effectively incorporate software into our project. This led us to the idea of having a smartphone app which would take a photograph and give simple text based results. Having this app would remove the subjectivity of colour detection by eye and also gives us an accurate way to display results.

The Problems

The idea of the making a smartphone app introduced some hurdles which had to be overcome. We had to ensure the positioning of the biosensor was always fixed relative to the camera, the lighting was controlled and the photo was taken from a distance more than the focal length of the smartphone camera.

Biosensor Casing and Enclosure

To solve these problems we decided to make a plastic casing in which you would place the biosensor before application of the sample. We also designed an enclosure into which the casing would slide. The casing made sure that the biosensor was always in the correct position and the enclosure made sure the light was controlled. We designed the top of the enclosure so that the phone can be secured in the optimum position to take the photo. In order to obtain a clear image every time the box was set to be greater than the focal length of the camera. The enclosure and casing are reusable, so as only the paper biosensor needs to be replaced for each different test.

The Smartphone Application

After we finalised the casing and enclosure, we built an application for iPhone 5s, which can be easily modified for use on other phones. We developed it using swift programming language and used Xcode tools to help our development. We tried to use standard and efficient software engineering practices wherever possible. The code can be accessed on the following github link here

To use the app all you have to do is slide your iPhone into the enclosure. The app will tell you to take a photo and with just a push of a button you will have accurate and non-subjective results