Initial implementation of audio distribution visualization

Basic demo works. Zooms/pans/filters and shows relevant 60px tiles (w/o images). Still bound to dummy data. Still needs false color visualization guide. Still needs HTML false color implementation to be converted to SVG. Still needs Axis on false color strip. Also: - Modified page footer - Disabled connect debug logging - removed static assets Worked on distribution visualisation internal plumbing for distribution visualisation Attempted to get rounding working Got tile generation working. Added package for rounding dates Also disabled connect debug logging work on getting tiles to work Added initial implementation of zoom worked on zoom factors, demo failing Got zoom working in both directions. Working on zoom surface got zoom surface working
QutEcoacoustics · Feb 19, 2015 · 84994a8 · 84994a8
1 parent 73b737a
commit 84994a8
Show file tree

Hide file tree

Showing 18 changed files with 775 additions and 160 deletions.
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -536,7 +536,7 @@ module.exports = function (grunt) {
                     hostname: '*',
                     port: 8080,
                     base: './<%= build_dir %>',
-                    debug: true,
+                    //debug: true,
                     livereload: true,
                     middleware: function (connect, options) {
 

diff --git a/bower.json b/bower.json
@@ -23,6 +23,7 @@
     "modernizr": "~2.8.x",
     "momentjs": "~2.8.x",
     "objectdiff": "https://github.com/NV/objectDiff.js.git",
+    "round-date": "~1.0.1",
     "sass-bootstrap": "3.0.2"
   },
   "dependencies": {},

diff --git a/buildConfig/build.config.js b/buildConfig/build.config.js
@@ -73,8 +73,9 @@ module.exports = {
             'vendor/momentjs/moment.js',
             'vendor/lodash/dist/lodash.js',
             'vendor/bowser/bowser.js',
-            'vendor/humanize-duration/humanize-duration.js'
-        ],
+            'vendor/humanize-duration/humanize-duration.js',
+            'vendor/round-date/roundDate.js'
+],
         js: [
             'vendor/jquery/dist/jquery.js',
             'vendor/angular/angular.js',
@@ -121,7 +122,8 @@ module.exports = {
             'vendor/bowser/bowser.js',
             'vendor/angular-growl-v2/build/angular-growl.js',
             'vendor/angular-local-storage/dist/angular-local-storage.js',
-            'vendor/humanize-duration/humanize-duration.js'
+            'vendor/humanize-duration/humanize-duration.js',
+            'vendor/round-date/roundDate.js'
         ],
         css: [
             // NOTE: bootstrap css imported in application.tpl.scss

diff --git a/src/app/app.js b/src/app/app.js
@@ -191,7 +191,7 @@ var app = angular.module('baw',
                                });
 
                  // location config
-                 //$locationProvider.html5Mode(true);
+                 $locationProvider.html5Mode(true);
 
                  // http default configuration
                  $httpProvider.defaults.withCredentials = true;

diff --git a/src/app/d3Bindings/d3.js b/src/app/d3Bindings/d3.js
@@ -4,8 +4,6 @@ angular.module("bawApp.d3", [
     "bawApp.d3.dotView",
     "bawApp.d3.terrainView",
     "bawApp.d3.timelineView",
-    "bawApp.d3.eventDistribution.distributionOverview",
-    "bawApp.d3.eventDistribution.distributionDetail",
-    "bawApp.d3.eventDistribution.distributionController",
+    "bawApp.d3.eventDistribution",
     "bawApp.d3.widgets"
 ]);
diff --git a/src/app/d3Bindings/eventDistribution/_eventDistribution.scss b/src/app/d3Bindings/eventDistribution/_eventDistribution.scss
@@ -12,7 +12,7 @@ event-distribution-overview, event-distribution-detail {
     fill: black;
 
     & * {
-      //shape-rendering: crispEdges;
+      shape-rendering: crispEdges;
     }
   }
 
@@ -66,3 +66,50 @@ event-distribution-detail {
   }
 }
 
+event-distribution-visualisation {
+    text-align: center;
+
+    .metaTrack {
+    }
+
+    .imageTrack {
+
+      .tiles {
+        background-color: paleturquoise;
+        position: relative;
+        height: 256px;
+
+        .tile {
+          width: 60px;
+          border: grey solid 1px;
+          border-left: deeppink solid 1px;
+          border-right: blue solid 1px;
+          background-color: rgba(255, 0, 0, 0.2);
+          height: 256px;
+          display: inline-block;
+          position: absolute;
+
+          & div {
+            font-size: 8pt;
+            color: white;
+            height: 60px;
+            width: 256px;
+            @include vendor-prefix(transform, rotate(-90deg));
+            @include vendor-prefix(transform-origin, right center 0);
+            top: -31px;
+            right: 30px;
+            position: absolute;
+          }
+        }
+      }
+
+      .dayImageContainer {
+        position: relative;
+        display: inline-block;
+
+        margin: 1em 1em 2em 1em;
+
+      }
+    }
+
+}