neatened up header on experiment page

also formatted image urls
QutEcoacoustics · Mar 14, 2013 · 0c96c63 · 0c96c63
1 parent 8a5e6cc
commit 0c96c63
Show file tree

Hide file tree

Showing 6 changed files with 169 additions and 175 deletions.
diff --git a/app/assets/javascripts/angular/controllers/experiments.js b/app/assets/javascripts/angular/controllers/experiments.js
@@ -20,9 +20,9 @@
          */
             function ExperimentsCtrl($scope, $resource, $routeParams, $route, $http, Media, AudioEvent, Tag) {
 
-            $scope.PREFACE_STAGE = "preface";
-            $scope.EXPERIMENT_STAGE = "experiment";
-            $scope.FINAL_STAGE = "conclusion";
+            $scope.PREFACE_STAGE = "Welcome";
+            $scope.EXPERIMENT_STAGE = "Activity";
+            $scope.FINAL_STAGE = "Conclusion";
 
             $scope.results = {
                 allowContact: true,
@@ -142,32 +142,36 @@
 
     app.controller('RapidScanCtrl', ['$scope', '$resource', '$routeParams', '$route', '$http', 'Media', 'AudioEvent', 'Tag',
         function RapidScanCtrl($scope, $resource, $routeParams, $route, $http, Media, AudioEvent, Tag) {
+            var BASE_URL = "http://sensor.mquter.qut.edu.au/Spectrogram.ashx?ID={0}&start={1}}&end={2}";
 
-            $scope.bigScope = $scope.$parent;
+            $scope.bigScope = $scope.$parent.$parent;
 
             $scope.bigScope.results.steps = angular.copy($scope.bigScope.spec.experimentSteps);
 
             $scope.stepResults = undefined;
+            var EXPERIMENT_STEPS = $scope.bigScope.results.steps.length;
             $scope.$watch(function () {
                 return $scope.bigScope.step;
             }, function (newValue, oldValue) {
-                $scope.stepResults = $scope.bigScope.results.steps[$scope.bigScope.step - 1];
+                if (newValue <= EXPERIMENT_STEPS) {
 
-                $scope.flashes = calculateFlashes();
-            });
+                    $scope.showInstructions = true;
 
-            $scope.startTimer = function() {
-                $scope.stepResults.startTime  = Date.now();
-            };
+                    $scope.stepResults = $scope.bigScope.results.steps[$scope.bigScope.step - 1];
 
-            $scope.endTimer = function() {
-                $scope.stepResults.endTime  = Date.now();
-            };
+                    $scope.flashes = calculateFlashes();
+                }
+            });
 
             $scope.showInstructions = true;
             $scope.start = function() {
                 $scope.showInstructions = false;
-                $scope.startTimer();
+                $scope.stepResults.startTimeStamp  = (new Date()).toISOString();
+            };
+
+            $scope.end = function() {
+                $scope.stepResults.endTimeStamp  = (new Date()).toISOString();
+                $scope.bigScope.step = $scope.bigScope.step + 1;
             };
 
             $scope.SPECTROGRAM_WIDTH = 1080;
@@ -188,7 +192,7 @@
                     var start = $scope.stepResults.endTime + (i * segmentDuration),
                         end = start + segmentDuration;
 
-                    var imageUrl = "";
+                    var imageUrl = String.format(BASE_URL, $scope.stepResults.guid, start, end);
 
                     segments.push({start: start, end: end, imageLink: imageUrl});
                 }

diff --git a/app/assets/templates/experiment_base.html b/app/assets/templates/experiment_base.html
@@ -38,16 +38,19 @@
             float: right;
             top: 0;
             right: 0;
-            margin-top: -75px;
+            margin-top: -35px;
+        }
+
+        h2 {
+           margin-top: -14px;
         }
 
 
     </style>
 
-    <h1>Experiment: {{spec.experiment}}</h1>
+    <h2>{{spec.experiment}} » {{stage}}</h2>
 
     <div id="experimentPreface" ng-show="stage == PREFACE_STAGE">
-        <h2>Welcome</h2>
 
         <p>
 
@@ -100,7 +103,6 @@ <h3>Instructions</h3>
         <button ng-click="verifyPreface()">Start experiment</button>
     </div>
     <div id="experimentBody" ng-show="stage == EXPERIMENT_STAGE">
-        <h2>Main experiment</h2>
         <div class="progress">
             Progress: {{step}}/{{spec.experimentSteps.length}}  <meter value="{{step}}" max="{{spec.experimentSteps.length}}"></meter>
         </div>
@@ -109,8 +111,6 @@ <h2>Main experiment</h2>
         <button ng-click="step = step + 1">Next</button>
     </div>
     <div id="experimentConclusion" ng-show="stage == FINAL_STAGE">
-        <h2>Done!</h2>
-
         <p>Thank you very much for participating.</p>
 
         <p  class="isa_info" ng-show="resultsSending">Your results are being saved at the moment. <em>Please do not close the window or navigate away!</em>

diff --git a/app/assets/templates/rapid_scanning_experiment.html b/app/assets/templates/rapid_scanning_experiment.html
@@ -18,16 +18,17 @@
         </div>
 
         <div ng-show="!showInstructions">
-            <div ng-show="bigScope.step == $index">
+            <div ng-repeat="step in bigScope.spec.experimentSteps" ng-show="bigScope.step == $index + 1">
 
                 <div>
                     <ul>
                         <li ng-repeat="segment in flashes">
                             <p>
                                 {{segment.start}}, {{segment.end}}
                             </p>
-                            <img src="http://sail.usc.edu/Peter/mystery/mystery.jpg"></li>
+                            <img ng-style="{height:'256px', width: SPECTROGRAM_WIDTH + 'px'}" ng-src="{{segment.imageLink}}"></li>
                     </ul>
+                    <button ng-click="end()">Done!</button>
                 </div>
             </div>
         </div>