Worked on false colour images

Tried the static image and tiled images approach. Added a new demos folder. Cleaned up dependencies and module architecture.
QutEcoacoustics · Nov 19, 2014 · 83d6101 · 83d6101
1 parent 2b3afd9
commit 83d6101
Show file tree

Hide file tree

Showing 18 changed files with 120 additions and 19 deletions.
diff --git a/src/app/app.js b/src/app/app.js
@@ -60,7 +60,7 @@ var app = angular.module('baw',
                              'decipher.tags',
                              'angular-growl',
                              'LocalStorageModule',
-                             "bawApp.vendorServices",
+                             "bawApp.vendorServices", /* Loads all vendor libraries that are automatically wrapped in a module */
 
 
                              'url', /* a custom uri formatter */
@@ -91,18 +91,14 @@ var app = angular.module('baw',
                              'audio-control',
                              'draggabilly',
 
-                             'bawApp.d3',                /* our d3 integration */
-                             'bawApp.d3.calendarView',
-                             'bawApp.d3.timelineView',
-                             'bawApp.d3.dotView',
-                             'bawApp.d3.terrainView',
-                             'bawApp.d3.audioView',
+                             'bawApp.d3',                /* our d3 controls */
 
                              'bawApp.accounts',
                              'bawApp.annotationViewer',
                              'bawApp.audioEvents',
                              'bawApp.annotationLibrary',
                              'bawApp.bookmarks',
+                             "bawApp.demo",
                              'bawApp.error',
                              'bawApp.home',
                              'bawApp.listen',
@@ -175,7 +171,8 @@ var app = angular.module('baw',
                          title: 'Audio Events' }).
                      when('/library/:recordingId/audio_events/:audioEventId', {templateUrl: paths.site.files.library.item, controller: 'AnnotationItemCtrl', title: 'Annotation :audioEventId'}).
 
-                     when('/d3Test', {templateUrl: paths.site.files.d3.testPage, controller: 'D3TestPageCtrl', title: 'D3 Test Page' }).
+                     when('/demo/d3', {templateUrl: paths.site.files.demo.d3, controller: 'D3TestPageCtrl', title: 'D3 Test Page' }).
+                     when('/demo/rendering', {templateUrl: paths.site.files.demo.rendering, controller: 'RenderingCtrl', title: 'Rendering' }).
 
                      // missing route page
                      when('/', {templateUrl: paths.site.files.home, controller: 'HomeCtrl'}).

diff --git a/src/app/d3Bindings/audioView/audioView.js b/src/app/d3Bindings/audioView/audioView.js
@@ -2,7 +2,7 @@
  * d3 Audio View directive
  * Created by Mark on 30/09/2014
  */
-angular.module("bawApp.d3.audioView", ["bawApp.d3"])
+angular.module("bawApp.d3.audioView", ["bawApp.vendorServices.auto"])
     .directive("bawAudioView", ["d3", "moment", function (d3, moment) {
 
         // d3 functions

diff --git a/src/app/d3Bindings/calendarView/calendarView.js b/src/app/d3Bindings/calendarView/calendarView.js
@@ -3,7 +3,7 @@
  * Created by Anthony on 23/08/2014, modified by Mark.
  * based on http://bl.ocks.org/mbostock/4063318
  */
-angular.module("bawApp.d3.calendarView", ["bawApp.d3"])
+angular.module("bawApp.d3.calendarView", ["bawApp.vendorServices.auto"])
     .directive(
     "bawCalendarView",
     ["d3", "moment",

diff --git a/src/app/d3Bindings/d3.js b/src/app/d3Bindings/d3.js
@@ -0,0 +1,7 @@
+angular.module("bawApp.d3", [
+    "bawApp.d3.audioView",
+    "bawApp.d3.calendarView",
+    "bawApp.d3.dotView",
+    "bawApp.d3.terrainView",
+    "bawApp.d3.timelineView"
+]);
diff --git a/src/app/d3Bindings/dotView/dotView.js b/src/app/d3Bindings/dotView/dotView.js
@@ -3,7 +3,7 @@
  * Created by Mark on 10/09/2014.
  * Based on http://neuralengr.com/asifr/journals/journals_dbs.html
  */
-angular.module("bawApp.d3.dotView", ["bawApp.d3"])
+angular.module("bawApp.d3.dotView", ["bawApp.vendorServices.auto"])
     .directive("bawDotView", ["d3", "moment", function (d3, moment) {
 
         function DotViewDetails(elementId, jsonResponse) {

diff --git a/src/app/d3Bindings/terrainView/terrainView.js b/src/app/d3Bindings/terrainView/terrainView.js
@@ -3,7 +3,7 @@
  * Created by Mark on 10/09/2014.
  * Based on http://mbostock.github.io/d3/talk/20111018/area-gradient.html
  */
-angular.module("bawApp.d3.terrainView", ["bawApp.d3"])
+angular.module("bawApp.d3.terrainView", ["bawApp.vendorServices.auto"])
     .directive("bawTerrainView", ["d3", "moment", function (d3, moment) {
 
         var m = [79, 80, 160, 79],

diff --git a/src/app/d3Bindings/timelineView/timelineView.js b/src/app/d3Bindings/timelineView/timelineView.js
@@ -3,7 +3,7 @@
  * Created by Mark on 09/09/2014.
  * based on http://bl.ocks.org/bunkat/2338034
  */
-angular.module("bawApp.d3.timelineView", ["bawApp.d3"])
+angular.module("bawApp.d3.timelineView", ["bawApp.vendorServices.auto"])
     .directive("bawTimelineView", ["d3", "moment", function (d3, moment) {
 
         function Details(elementId, jsonResponse) {

diff --git a/src/app/demo/_rendering.scss b/src/app/demo/_rendering.scss
@@ -0,0 +1,12 @@
+
+.renderedImage {
+  width: 1440px;
+  height: 350px;
+  background-color: lime;
+  outline: thick dashed;
+  margin: 15px;
+}
+
+.blank {
+  background-color: blue;
+}
diff --git a/src/app/d3Bindings/d3TestPage.js → src/app/demo/d3TestPage.js b/src/app/d3Bindings/d3TestPage.js → src/app/demo/d3TestPage.js
@@ -1,6 +1,5 @@
-var bawD3 = bawD3 || angular.module("bawApp.d3", []);
-
-bawD3.controller(
+angular.module("bawApp.demo.d3", [])
+.controller(
     "D3TestPageCtrl",
     ["$scope", "conf.paths", "$http", "$routeParams", "$location", "$q",
         "Site", "Project", "AudioRecording",

diff --git a/src/app/d3Bindings/d3TestPage.tpl.html → src/app/demo/d3TestPage.tpl.html b/src/app/d3Bindings/d3TestPage.tpl.html → src/app/demo/d3TestPage.tpl.html
diff --git a/src/app/demo/demo.js b/src/app/demo/demo.js
@@ -0,0 +1,4 @@
+angular.module("bawApp.demo", [
+    "bawApp.demo.rendering",
+    "bawApp.demo.d3"
+]);
diff --git a/src/app/demo/rendering.js b/src/app/demo/rendering.js
@@ -0,0 +1,27 @@
+/**
+ * Created by Anthony on 19/11/2014.
+ */
+angular.module("bawApp.demo.rendering", [])
+.controller(
+    "RenderingCtrl",
+    [
+        "$scope",
+        function($scope) {
+
+            $scope.loadStatic = function() {
+                $scope.staticSrc = "assets/temp/eabad986-56d9-47b5-bec6-47458ffd3eae_101023-0000.ACI-ENT-EVN.png"
+            };
+
+            var min = 0,
+                max = 1435,
+                basePath =  "assets/temp/tiles/tile_{0}.png";
+            //. "C:\Program Files\ImageMagick-6.9.0-Q16\convert.exe" -crop 1435x1@ .\eabad986-56d9-47b5-bec6-47458ffd3eae_101023-0000.ACI-ENT-EVN-trimmed72.png  tiles/tile_%d.png
+            $scope.loadTiles = function() {
+                $scope.tiles = [];
+                for (i = min; i < max; i++) {
+                    $scope.tiles[i] = basePath.format(i);
+                }
+            }
+        }
+    ]
+);
diff --git a/src/app/demo/rendering.tpl.html b/src/app/demo/rendering.tpl.html
@@ -0,0 +1,46 @@
+<div id="content">
+    <h1>
+        False Colour Rendering Experiment
+    </h1>
+    <section>
+        <h2>
+            Static image
+        </h2>
+        <div>
+            <button ng-click="loadStatic()">Load</button>
+        </div>
+        <div>
+            <div class="renderedImage" >
+                <img class="blank" ng-src="{{staticSrc}}" src="" />
+            </div>
+        </div>
+    </section>
+    <section>
+        <h2>
+            Bitmap image
+        </h2>
+        <div>
+            <button>Render</button>
+        </div>
+        <div>
+            <div class="renderedImage" >
+                <canvas class="blank"></canvas>
+            </div>
+        </div>
+    </section>
+    <section>
+        <h2>
+            Stacked images
+        </h2>
+        <div>
+            <button ng-click="loadTiles()">Load</button>
+        </div>
+        <div>
+            <div class="renderedImage">
+                <div class="blank">
+                    <img ng-repeat="t in tiles" ng-src="{{t}}" />
+                </div>
+            </div>
+        </div>
+    </section>
+</div>
diff --git a/...s/temp/eabad986-56d9-47b5-bec6-47458ffd3eae_101023-0000.ACI-ENT-EVN-trimmed.png b/...s/temp/eabad986-56d9-47b5-bec6-47458ffd3eae_101023-0000.ACI-ENT-EVN-trimmed.png
diff --git a/...temp/eabad986-56d9-47b5-bec6-47458ffd3eae_101023-0000.ACI-ENT-EVN-trimmed72.png b/...temp/eabad986-56d9-47b5-bec6-47458ffd3eae_101023-0000.ACI-ENT-EVN-trimmed72.png
diff --git a/src/baw.configuration.tpl.js b/src/baw.configuration.tpl.js
@@ -97,8 +97,9 @@ angular.module('bawApp.configuration', ['url'])
                     recordings: {
                         recentRecordings: 'recordings/recentRecordings/recentRecordings.tpl.html'
                     },
-                    d3: {
-                        testPage: 'd3Bindings/d3TestPage.tpl.html'
+                    demo: {
+                        d3: 'demo/d3TestPage.tpl.html',
+                        rendering: 'demo/rendering.tpl.html'
                     }
                 },
                 // routes used by angular

diff --git a/src/components/services/vendorServices/externals.js b/src/components/services/vendorServices/externals.js
@@ -26,5 +26,12 @@ angular
                  };
 
                  // HACK: d3 is stubborn, forcibly remove it from window
-                 delete $windowProvider.$get().d3;
+                 var window = $windowProvider.$get();
+                 if (window.d3) {
+                     delete window.d3;
+                 }
+                 else {
+                     console.warn("D3 not on window, hack not required");
+                 }
+
              }]);
diff --git a/src/sass/application.tpl.scss b/src/sass/application.tpl.scss
@@ -49,6 +49,7 @@ $DEBUG: '<%= build_configs.current.key === "development" %>' == 'true';
 @import "../app/recordInformation/record_information";
 @import "../app/recordings/audio_recordings";
 @import "../app/recordings/recentRecordings/recentRecordings";
+@import "../app/demo/rendering";
 @import "../app/search/saved_searches";
 @import "../app/sites/sites";
 @import "../app/tags/tags";