Closes #35, Closes #54 - have basic annotation insertion, and annotat…

…ion drawing on the spectrogram

modified:   app/models/audio_event.rb
modified:   app/models/audio_event_tag.rb
modified:   app/controllers/audio_events_controller.rb
	-- tried to get bug #57 fixed, no luck
	-- removed a infinite loop accepts_nested_attributes_for bug

modified:   app/assets/javascripts/app.js
	-- added an 'exports' notion so baw-debug-info could still access rootScopes's Print method even in an isolate scope

new file:   app/assets/stylesheets/_annotation_viewer.css.scss
renamed:    app/assets/stylesheets/audio_events.css.scss -> app/assets/stylesheets/_audio_events.css.scss
renamed:    app/assets/stylesheets/audio_recordings.css.scss -> app/assets/stylesheets/_audio_recordings.css.scss
renamed:    app/assets/stylesheets/base.css.scss -> app/assets/stylesheets/_base.css.scss
renamed:    app/assets/stylesheets/bookmarks.css.scss -> app/assets/stylesheets/_bookmarks.css.scss
new file:   app/assets/stylesheets/_dynamic.css.scss.erb
renamed:    app/assets/stylesheets/home.css.scss -> app/assets/stylesheets/_home.css.scss
renamed:    app/assets/stylesheets/layout.css.scss -> app/assets/stylesheets/_layout.css.scss
renamed:    app/assets/stylesheets/permissions.css.scss -> app/assets/stylesheets/_permissions.css.scss
renamed:    app/assets/stylesheets/photos.css.scss -> app/assets/stylesheets/_photos.css.scss
renamed:    app/assets/stylesheets/progresses.css.scss -> app/assets/stylesheets/_progresses.css.scss
renamed:    app/assets/stylesheets/projects.css.scss -> app/assets/stylesheets/_projects.css.scss
renamed:    app/assets/stylesheets/record_information.css.scss -> app/assets/stylesheets/_record_information.css.scss
renamed:    app/assets/stylesheets/saved_searches.css.scss -> app/assets/stylesheets/_saved_searches.css.scss
renamed:    app/assets/stylesheets/scaffolds.css.scss -> app/assets/stylesheets/_scaffolds.css.scss
renamed:    app/assets/stylesheets/sites.css.scss -> app/assets/stylesheets/_sites.css.scss
renamed:    app/assets/stylesheets/tags.css.scss -> app/assets/stylesheets/_tags.css.scss
renamed:    app/assets/stylesheets/users.css.scss -> app/assets/stylesheets/_users.css.scss
renamed:    app/assets/stylesheets/application.css -> app/assets/stylesheets/application.css.scss
	-- attempted to get optimal sass layout and precompile. ideally would ignore sprokets... unfortunately I couldn't get it working right. This needs more work. See bug #58

modified:   app/controllers/application_controller.rb
	-- temporarily enabled devise user hack so records would be inserted properly

modified:   app/assets/javascripts/angular/services/services.js
	-- added in tag service for showing tags in auto complete

new file:   app/assets/stylesheets/_listen.css.scss
new file:   app/assets/templates/annotation_viewer.html
modified:   app/assets/templates/listen.html
modified:   app/assets/javascripts/angular/controllers/listen.js
modified:   app/assets/javascripts/angular/directives/directives.js
new file:   app/assets/javascripts/angular/controllers/annotation_viewer.js
new file:   lib/assets/javascripts/jquery.drawabox.js
new file:   lib/assets/javascripts/knockout.drawabox.js
	-- this is the baw-annotation-viewer control.

modified:   app/assets/javascripts/application.js
renamed:    app/assets/javascripts/functions.js -> lib/assets/javascripts/functions.js
new file:   lib/assets/javascripts/lib.js
new file:   vendor/assets/javascripts/select2-release-3.2/index.js
	-- messing with assets pipeline

new file:   vendor/assets/javascripts/modernizr/modernizr-latest.js
	-- added modernizer js lib

app/assets/javascripts/angular/controllers/annotation_viewer.js

@@ -0,0 +1,15 @@
+"use strict";
+
+/**
+ * The listen controller. Show a spectrogram, listen to audio, annotate the spectrogram.
+ * @param $scope
+ * @param $routeParams
+ * @constructor
+ */
+function AnnotationViewerCtrl($scope, $element, $attrs, $transclude) {
+
+
+
+}
+
+AnnotationViewerCtrl.$inject = ['$scope', '$element', '$attrs', '$transclude'];

app/assets/javascripts/angular/controllers/listen.js

@@ -8,20 +8,18 @@
  * @param AudioEvent
  * @constructor
  */
-function ListenCtrl($scope, $resource, $routeParams, AudioRecording, AudioEvent) {
+function ListenCtrl($scope, $resource, $routeParams, AudioRecording, AudioEvent, Tag) {
 
 
-    var recordingResource = AudioRecording;
-
-    $scope.errorState = !GUID_REGEXP.test($routeParams.recordingId)
+    $scope.errorState = !GUID_REGEXP.test($routeParams.recordingId);
 
     if ($scope.errorState) {
         console.warn("Invalid guid specified in route... page rendering disabled");
     }
     else {
         var recordingId = $scope.recordingId = $routeParams.recordingId;
 
-        $scope.recording = recordingResource.get($routeParams);
+        $scope.recording = AudioRecording.get($routeParams);
 
         // HACK:
         $scope.recordingurl = "/media/" + recordingId + "_0_120_0_11025.mp3";
@@ -43,12 +41,13 @@ function ListenCtrl($scope, $resource, $routeParams, AudioRecording, AudioEvent)
 
         // HACK:
         // this should be treated as readonly
-        $scope.tags = [
-            {text: "HALLO!", type_of_tag: null, is_taxanomic: false, id: -1},
-            {text: "Koala", type_of_tag: "common_name", is_taxanomic: true, id: -2},
-            {text: "Corrus Ovvu", type_of_tag: "species_name", is_taxanomic: true, id: -3},
-            {text: "Cawwing", type_of_tag: "sounds_like", is_taxanomic: false, id: -4}
-        ];
+//        $scope.tags = [
+//            {text: "HALLO!", type_of_tag: null, is_taxanomic: false, id: -1},
+//            {text: "Koala", type_of_tag: "common_name", is_taxanomic: true, id: -2},
+//            {text: "Corrus Ovvu", type_of_tag: "species_name", is_taxanomic: true, id: -3},
+//            {text: "Cawwing", type_of_tag: "sounds_like", is_taxanomic: false, id: -4}
+//        ];
+        $scope.tags = Tag.query();
 
         $scope.limits = {
           time_min: 0.0,
@@ -108,4 +107,4 @@ function ListenCtrl($scope, $resource, $routeParams, AudioRecording, AudioEvent)
     }
 }
 
-ListenCtrl.$inject = ['$scope', '$resource', '$routeParams', 'AudioRecording', 'AudioEvent'];
+ListenCtrl.$inject = ['$scope', '$resource', '$routeParams', 'AudioRecording', 'AudioEvent', 'Tag'];

app/assets/javascripts/angular/directives/directives.js

@@ -37,7 +37,10 @@
             replace: true,
             template: '<div><a href ng-click="showOrHideDebugInfo= !showOrHideDebugInfo">Debug info {{showOrHideDebugInfo}}</a><pre ui-toggle="showOrHideDebugInfo" class="ui-hide"  ng-bind="print()"></pre></div>',
             link: function(scope, element, attrs) {
-
+                if (!scope.print) {
+                    //console.warn("baw-debug-info missing parent scope, no print function");
+                    scope.print = bawApp.print;
+                }
             }
         }
     });
@@ -90,6 +93,33 @@
     });
 
 
+    bawds.directive('bawAnnotationViewer', function() {
+        return {
+            restrict: 'AE',
+            scope: {
+                model: '=model'
+            },
+            controller: AnnotationViewerCtrl,
+            require: '', // ngModel?
+            templateUrl: '/assets/annotation_viewer.html',
+//            compile: function(element, attributes, transclude)  {
+//                // transform DOM
+//            },
+            link: function(scope, element, attributes, controller) {
+                var $element =  $(element);
+                // assign a unique id to scope
+                scope.id = Number.Unique();
+                var $canvas = $($element.find(".annotation-viewer img + div")[0]);
+
+
+
+                // init drawabox
+                $canvas.drawabox();
+            }
+        }
+    });
+
+
 })();
 
 //bawApp.directive('nsDsFade', function() {

app/assets/javascripts/angular/services/services.js

@@ -4,7 +4,7 @@
     /**
      * Helper method for adding a put request onto the standard angular resource service
      * @param $resource - the stub resource
-     * @param {string} path - the webserver path
+     * @param {string} path - the web server path
      * @param {Object} paramDefaults
      * @param {Object} [actions] a set of actions to also add (extend)
      * @return {*}
@@ -39,5 +39,9 @@
         return resource;
     });
 
+    bawss.factory('Tag', function($resource) {
+        return $resource('/tags/:tagId', {tagId: '@tagId'}, {});
+    });
+
 
 })();

app/assets/javascripts/app.js

@@ -4,6 +4,10 @@
 
 // global definition
 var bawApp = (function() {
+    var exports = {
+
+    };
+
     // Helper function
 
 
@@ -85,7 +89,7 @@ var bawApp = (function() {
         });
 
     app.run(['$rootScope','$location', '$route', function ($rootScope, $location, $route) {
-            $rootScope.print = function () {
+            exports.print = $rootScope.print = function () {
                 var seen = [];
                 var badKeys = ["$digest", "$$watchers", "$$childHead", "$$childTail", "$$listeners", "$$nextSibling", "$$prevSibling", "$root", "this", "$parent"];
                 var str = JSON.stringify(this,
@@ -141,4 +145,6 @@ var bawApp = (function() {
 
         }]);
 
+    return exports;
+
 })();

app/assets/javascripts/application.js

@@ -12,12 +12,14 @@
 //
 //= require jquery
 //= require jquery_ujs
+//= require jquery.ui.all
 //= require jquery.ui.datepicker
 //= require angular.js
 //= require angular-resource.js
 //= require angular-ui.js
 //= require angular-ui-ieshiv.js
 //= require_tree .
+//= require lib
 //= require_tree ../../../vendor/assets/javascripts/.
 //= require app
 

app/assets/stylesheets/_annotation_viewer.css.scss

@@ -0,0 +1,87 @@
+@import "base";
+@import "_dynamic.css.scss.erb";
+
+baw-annotation-viewer {
+
+  & .tag-preview {
+
+  }
+
+
+  & #scroller{
+    overflow-x: scroll;
+    overflow-y: hidden;
+  }
+
+  & .annotation-viewer {
+
+    display: inline-block;
+    position: relative;
+    line-height: 0;
+    padding: 0;
+    margin: 0;
+
+
+    & img {
+
+    }
+
+    // overlay
+    & img + div {
+      width: 100%;
+      height : 100%;
+      position: absolute;
+      top: 0;
+      left: 0;
+
+      // debug
+      @if $DEBUG { background-color: rgba(255,0,0,0.15) ;}
+
+    }
+  }
+
+  & .controls {
+
+  }
+
+  // general
+
+  & .tagItem {
+
+    border-style: $border-style;
+    border-width: $border-width;
+    border-color: nth($master-highlight, 2);
+    position: absolute;
+
+    &[data-selected="true"] {
+      border-color: nth($master-complementary, 2);
+      @include glow(nth($master-background, 2));
+
+      & .close-icon{
+        visibility: visible;
+      }
+    }
+
+    &:hover .close-icon {
+      visibility: visible;
+    }
+  }
+
+  & .close-icon {
+    position: relative;
+    left: 3px;
+    top: 6px;
+    color: black;
+    font-weight: bold;
+    font-size: 12px;
+    font-family: sans-serif;
+    vertical-align: top;
+    cursor: pointer;
+
+    &:before{
+      content: "x";
+    }
+
+    visibility: hidden;
+  }
+}

app/assets/stylesheets/base.css.scss → app/assets/stylesheets/_base.css.scss

@@ -11,6 +11,7 @@
  *
  */
 
+
 // https://kuler.adobe.com/#themeID/1080677
 // http://colorschemedesigner.com/
 $primary-color:         #E9E7C2 #D4DEB8 #e8e7e4;
@@ -28,7 +29,10 @@ $standard-padding:             $standard-padding-vertical $standard-padding-hori
 $adjacent-padding: $standard-padding-horizontal / 2;
 
 $border-width: 1px;
+$border-style: solid;
+$standard-border: $border-width $border-style;
 
+$standard-glow-alpha: 0.2;
 
 /*
  *
@@ -50,8 +54,15 @@ $border-width: 1px;
  *
  */
 
+@mixin transition($properties:all, $duration:500ms, $function:ease, $delay:0) {
+    @include vendor-prefix(transition, join($properties,(), comma));
+    @include vendor-prefix(transition-duration, join($duration,(), comma));
+    @include vendor-prefix(transition-timing-function, join($function,(), comma));
+    @include vendor-prefix(transition-delay, join($delay, (), comma));
+}
+
 .standard-transition{
-  @include vendor-prefix(transition, all 0.5s ease);
+  @include transition();
 }
 
 .ui-show {
@@ -65,11 +76,17 @@ $border-width: 1px;
 
 }
 
+@mixin glow($color) {
+  $alphaed: rgba($color, $standard-glow-alpha);
+  @include vendor-prefix(box-shadow, 0 0 5px 5px $alphaed);
+  @include transition(box-shadow border-color,  400ms 50ms, linear linear);
+
+}
 
 
 /*
  *
  *  Styles
- *  // see layout.css.scss
+ *  // see ./layout.css.scss
  */
 

app/assets/stylesheets/_dynamic.css.scss.erb

@@ -0,0 +1,2 @@
+$DEBUG:'<%= Rails.env.development? %>';
+

app/assets/stylesheets/layout.css.scss → app/assets/stylesheets/_layout.css.scss

@@ -1,4 +1,5 @@
-@import 'base.css.scss';
+@import '_base';
+@import '_dynamic';
 
 /**********************************************************
  *

app/assets/stylesheets/application.css → app/assets/stylesheets/application.css.scss

@@ -12,4 +12,13 @@
  *= require jquery.ui.all
  *= require_tree ../../../vendor/assets/javascripts/.
  *= require_tree .
- */
+ *= depend_on "_base"
+ */
+
+
+//@import "base";
+//@import "layout";
+//@import "_dynamic.css.scss.erb";
+//
+//
+//@import "/partials/*";

app/assets/templates/annotation_viewer.html

@@ -0,0 +1,16 @@
+<div ng-controller="AnnotationViewerCtrl">
+    <div class="tag-preview">
+
+    </div>
+
+    <div id="scroller">
+        <div class="annotation-viewer" id="annotation-viewer_{{id}}" >
+            <img ng-src="{{model.url}}">
+            <div id="spectrogramAnnotations_{{id}}"></div>
+        </div>
+    </div>
+
+    <div id="controls">
+        <baw-debug-info></baw-debug-info>
+    </div>
+</div>

app/assets/templates/listen.html

@@ -1,4 +1,13 @@
 <div id="content" data-ng-controller="ListenCtrl">
+    <script type="text/javascript" id="">
+        // temporary init script - intended fore removal
+
+        $(document).ready(function() {
+
+        });
+
+    </script>
+
     <a href="/listen/1bd0d668-1471-4396-adc3-09ccd8fe949a">demo</a>
     <a href="#" ng-click="refresh()">demo</a>
 
@@ -11,7 +20,7 @@ <h1>Listen</h1>
     <p>Listen and annotate.</p>
 
     <h3>Spectrogram</h3>
-    <img ng-src="{{spectrogram.url}}">
+    <baw-annotation-viewer model="spectrogram"></baw-annotation-viewer>
 
     <h3>Audio Controls</h3>
     <audio id="main-player" controls>
@@ -67,7 +76,7 @@ <h3>Annotations</h3>
     <table>
         <thead>
             <tr>
-                <th>Tag ID</th>
+                <th>Annotation ID</th>
                 <th>Audio Recording</th>
                 <th>Created At</th>
                 <th>Created By</th>