Difference between revisions of "Team:Edinburgh/Software"

Line 7: Line 7:
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
 
     </head>
 
     </head>
 +
 
  <!-- menu -->  
 
  <!-- menu -->  
 
<div id="custom-bootstrap-menu" class="navbar navbar-default navbar-fixed-top" role="navigation">
 
<div id="custom-bootstrap-menu" class="navbar navbar-default navbar-fixed-top" role="navigation">
Line 93: Line 94:
  
 
     <!-- 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">Design Development</h1>
 
                 <p class="intro-text">
 
                 <p class="intro-text">
 
                 </p>
 
                 </p>
Line 118: Line 116:
 
       </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/4/4c/Edigem15_Design_prototype1.jpg">
 +
                        </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/6/62/Edigem15_Design_prototype2.jpg">
 +
                            </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/4/41/Edigem15_Design_prototype3.jpg">
 +
                        </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.//link here
 +
          </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>

Revision as of 23:41, 18 September 2015

gh

Design Development

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.//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