Final tweaks added to visualise page

- Loading bars package actually saved to bower.json - Annoying TimeAxis labels are no longer visible while the page is loading - TimeAxis now actually merges is provided options, rather than just ignoring them! - Loading spinner gifs added in place of overview and detail controls while data is loading
QutEcoacoustics · Feb 26, 2015 · 2ab9486 · 2ab9486
1 parent 85afca9
commit 2ab9486
Show file tree

Hide file tree

Showing 7 changed files with 29 additions and 8 deletions.
diff --git a/bower.json b/bower.json
@@ -24,7 +24,8 @@
     "momentjs": "~2.8.x",
     "objectdiff": "https://github.com/NV/objectDiff.js.git",
     "round-date": "~1.0.1",
-    "sass-bootstrap": "3.0.2"
+    "sass-bootstrap": "3.0.2",
+    "angular-loading-bar": "~0.7.1"
   },
   "dependencies": {},
   "private": true,

diff --git a/src/app/d3Bindings/eventDistribution/distributionDetail.js b/src/app/d3Bindings/eventDistribution/distributionDetail.js
@@ -178,7 +178,7 @@ angular
                         .clipPath("url(#" + clipId + ")")
                         .classed("mainItemsGroup", true);
 
-                    xAxis = new TimeAxis(main, xScale, {position: [0, mainHeight]});
+                    xAxis = new TimeAxis(main, xScale, {position: [0, mainHeight], isVisible: false});
                 }
 
                 function updateDataVariables(data) {

diff --git a/src/app/d3Bindings/eventDistribution/distributionOverview.js b/src/app/d3Bindings/eventDistribution/distributionOverview.js
@@ -62,7 +62,7 @@ angular
                     updateDimensions();
 
                     mini = createMini(chart);
-                    xAxis = new TimeAxis(mini, xScale, {position: [0, miniHeight]});
+                    xAxis = new TimeAxis(mini, xScale, {position: [0, miniHeight], isVisible: false});
                 }
 
                 function updateData(data) {
@@ -77,7 +77,7 @@ angular
                     if (data && data.items.length > 0) {
                         display();
 
-                        xAxis.update(xScale, [0, miniHeight]);
+                        xAxis.update(xScale, [0, miniHeight], true);
                     }
                 }
 

diff --git a/src/app/d3Bindings/widgets/timeAxis.js b/src/app/d3Bindings/widgets/timeAxis.js
@@ -14,7 +14,7 @@ angular
                         position: [0, 0],
                         isVisible: true
                     },
-                    options = angular.extend(defaultOptions, options),
+                    options = angular.extend(defaultOptions, _options),
                     scale = _scale || d3.time.scale(),
                     axisG;
 

diff --git a/src/app/visualize/_visualize.scss b/src/app/visualize/_visualize.scss
@@ -18,6 +18,15 @@
       }
     }
   }
+
+  .loadingImage {
+    $loadGifPath:  image-url('load.gif');
+    background: $loadGifPath center center no-repeat;
+    width: 100%;
+    height: 60px;
+
+
+  }
 }
 
 
diff --git a/src/app/visualize/visualize.js b/src/app/visualize/visualize.js
@@ -21,6 +21,7 @@ angular
             $scope.filterType = null;
             $scope.sites = [];
             $scope.projects = [];
+            $scope.isLoading = true;
 
 
             var parameters = validateParameters();
@@ -38,6 +39,8 @@ angular
                 chain.then(sitesRetrieved)
                     .then(getOtherData)
                     .then(processOtherData, function error() {
+                        $scope.isLoading = false;
+
                         if (!$scope.errorState) {
                             $scope.errorState = "an unknown error occurred";
                         }
@@ -81,10 +84,15 @@ angular
                         return d.id;
                     },
                     getTileUrl: function(date, category, tileSizeSeconds, tileSizePixels, datum, index) {
-                        //var hourOfDay = date.getHours();
+                        var hourOfDay = date.getHours();
+
+                        if (datum.source.id !== 188238) {
+                            return;
+                        }
 
                         // do not attempt to load dll's for demo
-                        return;
+                        var url = "/assets/temp/demo/188238_" + hourOfDay + ".png";
+                        return url;
                     }
                 }
             };
@@ -233,6 +241,8 @@ angular
             function processOtherData(results) {
                 console.debug("Visualise data promise chain success", arguments);
 
+                $scope.isLoading = false;
+
                 var projects = results[1].data.data;
                 $scope.projects = projects;
 

diff --git a/src/app/visualize/visualize.tpl.html b/src/app/visualize/visualize.tpl.html
@@ -32,12 +32,13 @@ <h2>Audio distribution visualisation</h2>
 
         <section class="row">
             <event-distribution-overview></event-distribution-overview>
-            <!--{{distributionOptions.overviewExtent}}-->
+            <div ng-if="isLoading" class="loadingImage"></div>
         </section>
 
         <section class="row">
             <h3>Detailed view for {{distributionOptions.detailDuration}}</h3>
             <event-distribution-detail></event-distribution-detail>
+            <div ng-if="isLoading" class="loadingImage"></div>
         </section>
 
         <section class="row">