Intial work on zomming spectrograms

QutEcoacoustics · Nov 12, 2015 · 04bf371 · 04bf371
1 parent bf233f2
commit 04bf371
Show file tree

Hide file tree

Showing 20 changed files with 1,234 additions and 453 deletions.
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -37,6 +37,7 @@ module.exports = function (grunt) {
     grunt.loadNpmTasks("grunt-babel");
     grunt.loadNpmTasks("grunt-ng-constant");
     grunt.loadNpmTasks("grunt-editor");
+    grunt.loadNpmTasks("grunt-beep");
 
     /**
      * Load in our build configuration file.
@@ -751,7 +752,7 @@ module.exports = function (grunt) {
              */
             options: {
                 livereload: true,
-                spawn: false
+                spawn: true
             },
 
             /**
@@ -776,15 +777,15 @@ module.exports = function (grunt) {
                     "<%= app_files.js %>"
                 ],
                 // recent modification: files are copied before unit tests are run!
-                tasks: ["jshint:src", "ngconstant:build", "babel:transpile_appjs", "copy:build_appjs", "karma:unit:run"]
+                tasks: ["jshint:src", "beep:error", "ngconstant:build", "babel:transpile_appjs", "copy:build_appjs", "karma:unit:run"]
             },
 
             jssrc2: {
                 files: [
                     "<%= app_files.specialjs %>",
                 ],
                 // recent modification: files are copied before unit tests are run!
-                tasks: ["jshint:src", "ngconstant:build", "babel:transpile_appjs", "copy:build_appjs", "karma:unit:run"]
+                tasks: ["jshint:src", "beep:error","ngconstant:build", "babel:transpile_appjs", "copy:build_appjs", "karma:unit:run"]
             },
 
 

diff --git a/package.json b/package.json
@@ -19,6 +19,7 @@
     "connect-modrewrite": "0.7.x",
     "grunt": "~0.4.1",
     "grunt-babel": "^5.0.1",
+    "grunt-beep": "^0.3.2",
     "grunt-bump": "^0.3",
     "grunt-changelog": "^0.3",
     "grunt-cli": "^0.1.13",

diff --git a/src/app/annotationLibrary/annotationItem.tpl.html b/src/app/annotationLibrary/annotationItem.tpl.html
@@ -222,4 +222,4 @@ <h4 class="media-heading">
             </div>
         </div>
     </div>
-</div>
+</div>
diff --git a/src/app/d3Bindings/eventDistribution/_eventDistribution.scss b/src/app/d3Bindings/eventDistribution/_eventDistribution.scss
@@ -134,7 +134,7 @@ event-distribution-detail {
   }
 }
 
-event-distribution-visualisation {
+event-distribution-visualisation, event-distribution-visualisation-multi-scale {
   text-align: center;
 
   .metaTrack {

diff --git a/src/app/d3Bindings/eventDistribution/distributionDetail.js b/src/app/d3Bindings/eventDistribution/distributionDetail.js
@@ -27,6 +27,7 @@ angular
                     zoom,
                     zoomSurface,
                 // 6 hours - from edge to edge of the graph.
+                    // TODO: refactor so that zoom limit is dynamic
                     zoomLimitSeconds = 6 * 60 * 60,
                     visualizationDuration = null,
                 // HACK: a "lock" placed around the invocation of manual zoom events. Assumes synchronicity.
@@ -64,6 +65,7 @@ angular
                 self.maximum = null;
                 self.visibleExtent = null;
                 self.selectedCategory = null;
+                self.zoomScale = 1;
 
                 // init
                 create();
@@ -264,6 +266,8 @@ angular
                     zoom.scale(zf.currentScale);
                     setZoomTranslate(zf.dateTranslate);
 
+                    updatePublicZoomScale();
+
                     // falsely trigger zoom events to force d3 to re-render with new scale
                     zoomUpdate();
 
@@ -297,7 +301,7 @@ angular
                         .data(self.lanes)
                         .enter()
                         .append("text")
-                        .text(id)
+                        .text(dataFunctions.getCategoryName)
                         .attr({
                             x: -laneLabelMarginRight,
                             y: function (d, i) {
@@ -417,6 +421,8 @@ angular
                         domain = xScale.domain();
                     }
 
+                    updatePublicZoomScale();
+
                     //console.debug("DistributionDetail:zoom:", d3.event.translate, d3.event.scale, domain, zoom.translate(), isManual);
 
                     // don't propagate cyclical events
@@ -441,6 +447,8 @@ angular
                     //console.debug("DistributionDetail:zoomEnd:", d3.event.translate, d3.event.scale);
 
                     if (isItemsToRender) {
+                        updatePublicZoomScale();
+
                         dataFunctions.extentUpdate(self.visibleExtent, "DistributionDetail");
                     }
                 }
@@ -541,6 +549,12 @@ angular
                     _lockManualZoom = false;
                 }
 
+                function updatePublicZoomScale() {
+                    let z = zoom.scale();
+
+                    self.zoomScale = z === undefined ? 1 : z;
+                }
+
                 function setZoomTranslate(dateOffset) {
                     zoom.translate([-xScale(dateOffset), 0]);
                 }
@@ -565,10 +579,6 @@ angular
                 function svgHeight() {
                     return mainHeight + margin.top + margin.bottom;
                 }
-
-                function id(a) {
-                    return a;
-                }
             };
         }
     ]
@@ -593,4 +603,4 @@ angular
             };
         }
     ]
-);
+);
diff --git a/src/app/d3Bindings/eventDistribution/distributionOverview.js b/src/app/d3Bindings/eventDistribution/distributionOverview.js
@@ -249,7 +249,7 @@ angular
                         .data(that.lanes)
                         .enter()
                         .append("text")
-                        .text(id)
+                        .text(dataFunctions.getCategoryName)
                         .attr({
                                   x: -labelRectPadding,
                                   y: function (d, i) {
@@ -326,10 +326,6 @@ angular
                     return that.lanes.indexOf(dataFunctions.getCategory(d));
                 }
 
-                function id(a) {
-                    return a;
-                }
-
                 function calculateMiniWidth() {
                     return chart.node().getBoundingClientRect().width - margin.left - margin.right;
                 }
@@ -366,4 +362,4 @@ angular
             };
         }
     ]
-);
+);
diff --git a/src/app/d3Bindings/eventDistribution/distributionVisualisation.js b/src/app/d3Bindings/eventDistribution/distributionVisualisation.js
@@ -603,13 +603,13 @@ angular
                 templateUrl: paths.site.files.d3Bindings.eventDistribution.distributionVisualisation,
                 link: function ($scope, $element, attributes, controller, transcludeFunction) {
                     var element = $element[0];
-                    controller.visualisation = new DistributionVisualisation(
+                    controller.visualisation.push(new DistributionVisualisation(
                         element,
                         controller.data,
                         controller.options.functions,
-                        $scope.$id);
+                        $scope.$id));
                 }
             };
         }
     ]
-);
+);
-Original file line number
+Diff line change
@@ Expand Up / @@ -222,4 +222,4 @@ <h4 class="media-heading"> @@
                 </div>
             </div>
         </div>
-    </div>
+    </div>