Adding camera images into the UI

mtlynch · Apr 17, 2017 · c6f87be · c6f87be
1 parent 7ad6dcd
commit c6f87be
Show file tree

Hide file tree

Showing 4 changed files with 71 additions and 0 deletions.
diff --git a/app/app.css b/app/app.css
@@ -50,3 +50,8 @@ div.tooltip {
   border-radius: 8px;
   pointer-events: none;
 }
+
+div.cameraImage {
+  width: 65%;
+  margin-left: 15px;
+}
diff --git a/app/app.js b/app/app.js
@@ -29,4 +29,34 @@ greenPiThumbApp.controller('DashboardCtrl', function($scope, $http) {
     $scope.latestSoilMoisture =
       moistureHistory[moistureHistory.length - 1].soil_moisture;
   });
+  $http.get('/images.json').success(function(images) {
+    $scope.images = [];
+    images.forEach(function(image) {
+      $scope.images.push({
+        'timestamp': image.timestamp,
+        'filename': 'images/' + image.filename
+      });
+    });
+    $scope.images.sort(function(a, b) {
+      if (a.timestamp < b.timestamp) {
+        return -1;
+      }
+      if (a.timestamp > b.timestamp) {
+        return 1;
+      }
+      return 0;
+    });
+    $scope.currentImage = $scope.images.length - 1;
+  });
+
+  $scope.previousImage = function() {
+    $scope.currentImage -= 1;
+    if ($scope.currentImage < 0) {
+      $scope.currentImage = $scope.images.length - 1;
+    }
+  };
+
+  $scope.nextImage = function() {
+    $scope.currentImage = ($scope.currentImage + 1) % $scope.images.length;
+  };
 });
diff --git a/app/app_test.js b/app/app_test.js
@@ -33,6 +33,12 @@ describe('greenPiThumbApp controller', function() {
         {'timestamp': '20170408T1330Z', 'soil_moisture': 888.1},
         {'timestamp': '20170408T1345Z', 'soil_moisture': 888.2}
       ]);
+    backend.expect('GET', '/images.json').respond(
+      [
+        {'timestamp': '20170408T1315Z', 'filename': '2017-04-08T1315Z.jpg'},
+        {'timestamp': '20170408T1330Z', 'filename': '2017-04-08T1330Z.jpg'},
+        {'timestamp': '20170408T1345Z', 'filename': '2017-04-08T1355Z.jpg'}
+      ]);
   }));
 
   beforeEach(angular.mock.inject(function($controller, $rootScope, $http) {
@@ -61,4 +67,24 @@ describe('greenPiThumbApp controller', function() {
     expect(mockScope.lightLevel).toBeDefined();
     expect(mockScope.soilMoisture).toBeDefined();
   });
+
+  it('initializes currentImage correctly', function() {
+    expect(mockScope.currentImage).toEqual(2);
+  });
+
+  it('cycles images forward correctly', function() {
+    mockScope.nextImage();
+    expect(mockScope.currentImage).toEqual(0);
+    mockScope.nextImage();
+    expect(mockScope.currentImage).toEqual(1);
+  });
+
+  it('cycles images backward correctly', function() {
+    mockScope.previousImage();
+    expect(mockScope.currentImage).toEqual(1);
+    mockScope.previousImage();
+    expect(mockScope.currentImage).toEqual(0);
+    mockScope.previousImage();
+    expect(mockScope.currentImage).toEqual(2);
+  });
 });
diff --git a/app/index.html b/app/index.html
@@ -32,6 +32,16 @@ <h1>GreenPiThumb Dashboard</h1>
       <td>{{ latestSoilMoisture | number:0 }}</td>
     </tr>
   </table>
+  <div class="cameraImage">
+    <a ng-href="{{ images[currentImage].filename }}" target="_blank">
+      <img class="img-responsive" ng-src="{{ images[currentImage].filename }}" src="#" alt="GreenPiThumb camera image" />
+    </a>
+    <p>
+      {{ images[currentImage].timestamp | date: 'yyyy-MM-dd h:mm:ss a' }}<br />
+      ({{ currentImage + 1 }} of {{ images.length }})</p>
+    <button class="btn btn-default" ng-click="previousImage()">Previous</button>
+    <button class="btn btn-default" ng-click="nextImage()">Next</button>
+  </div>
   <h2>Temperature</h2>
   <line-graph chart-data="temperature" value-property="temperature"></line-graph>
   <h2>Ambient Humidity</h2>