Work done on Annotation viewer - tags at top.

modified: app/assets/javascripts/angular/controllers/annotation_viewer.js modified: app/assets/javascripts/angular/controllers/listen.js modified: app/assets/javascripts/angular/directives/directives.js modified: app/assets/stylesheets/partials/_annotation_viewer.css.scss modified: app/assets/templates/annotation_viewer.html modified: app/assets/templates/listen.html modified: lib/assets/javascripts/functions.js modified: lib/assets/javascripts/jquery.drawabox.js
QutEcoacoustics · Jan 31, 2013 · 4be29b0 · 4be29b0
1 parent 6187967
commit 4be29b0
Show file tree

Hide file tree

Showing 8 changed files with 111 additions and 23 deletions.
diff --git a/app/assets/javascripts/angular/controllers/annotation_viewer.js b/app/assets/javascripts/angular/controllers/annotation_viewer.js
@@ -21,11 +21,15 @@ function AnnotationViewerCtrl($scope, $element, $attrs, $transclude) {
         }
     };
 
+    $scope.positionLabel = function (audioEvent) {
+        return $scope.model.converters.secondsToPixels(audioEvent.startTimeSeconds);
+    };
+
 
 
 
     // updated in directive
-    $scope.converters = {};
+    $scope.model.converters = $scope.model.converters || {};
 
 
 }

diff --git a/app/assets/javascripts/angular/controllers/listen.js b/app/assets/javascripts/angular/controllers/listen.js
@@ -80,9 +80,13 @@ function ListenCtrl($scope, $resource, $routeParams, Media, AudioEvent, Tag) {
             function audioEventsQuerySuccess() {
                 // TODO : map tag's
 
-                // give local Ids
+
                 for (var index = 0; index < $scope.model.audioEvents.length; index++) {
+                    // give local Ids
                     $scope.model.audioEvents[index].__temporaryId__ = Number.Unique;
+
+                    // give other properties
+                    $scope.model.audioEvents[index]._selected = false;
                 }
             },
             function audioEventQueryFailure() {
@@ -101,9 +105,29 @@ function ListenCtrl($scope, $resource, $routeParams, Media, AudioEvent, Tag) {
 
 
         $scope.clearSelected = function() {
-            $scope.model.selectedAudioEvents.length = 0;
+            //$scope.model.selectedAudioEvents.length = 0;
+
+            angular.forEach($scope.model.audioEvents, function (value, key){
+               value._selected = false;
+            });
+        };
+
+        $scope.selectedFilter = function(audioEvent) {
+            return audioEvent._selected;
         };
 
+        $scope.debug = function(args) {
+            console.log(args);
+            console.log(this);
+
+        };
+
+//        $scope.selectAudioEvent = function(audioEvent) {
+//            $scope.model.selectedAudioEvents.length = 0;
+//            $scope.model.selectedAudioEvents.push(audioEvent);
+//        };
+
+
         $scope.addAnnotation = function createAnnotation() {
             // BUG: ONLY SAVES FIRST ONE
             var a = angular.copy(this. $scope.model.selectedAudioEvents[0]);
@@ -143,4 +167,4 @@ function ListenCtrl($scope, $resource, $routeParams, Media, AudioEvent, Tag) {
     }
 }
 
-ListenCtrl.$inject = ['$scope', '$resource', '$routeParams', 'Media', 'AudioEvent', 'Tag'];
+ListenCtrl.$inject = ['$scope', '$resource', '$routeParams', 'Media', 'AudioEvent', 'Tag'];
diff --git a/app/assets/javascripts/angular/directives/directives.js b/app/assets/javascripts/angular/directives/directives.js
@@ -303,13 +303,15 @@
 
 
                 // init unit conversion
-                function updateConverters() {scope.model.converters = updateUnitConversions(scope, scope.$image.width(), scope.$image.height());}
+                function updateConverters() {
+                    scope.model.converters = updateUnitConversions(scope, scope.$image.width(), scope.$image.height());
+                }
                 scope.$watch(function() {return scope.model.media.imageUrl}, updateConverters);
                 scope.$image[0].addEventListener('load', updateConverters, false);
 
                 // init drawabox
                 scope.model.audioEvents = scope.model.audioEvents || [];
-                scope.model.selectedAudioEvents = scope.model.selectedAudioEvents || [];
+                //scope.model.selectedAudioEvents = scope.model.selectedAudioEvents || [];
 
 
                 scope.$canvas.drawabox({
@@ -335,8 +337,15 @@
 
                         // support for multiple selections - remove the clear
                         scope.$apply(function () {
-                            scope.model.selectedAudioEvents.length = 0;
-                            scope.model.selectedAudioEvents.push(scope.model.audioEvents[element[0].annotationViewerIndex]);
+                            //scope.model.selectedAudioEvents.length = 0;
+                            //scope.model.selectedAudioEvents.push(scope.model.audioEvents[element[0].annotationViewerIndex]);
+
+                            angular.forEach(scope.model.audioEvents, function (value, key){
+                                value._selected = false;
+                            });
+
+                            // new form of selecting
+                            scope.model.audioEvents[element[0].annotationViewerIndex]._selected = true
                         });
                     },
                     "boxResizing": function (element, box) {
@@ -364,13 +373,13 @@
                             var itemToDelete = scope.model.audioEvents[element[0].annotationViewerIndex];
                             itemToDelete.deletedAt = (new Date());
 
-                            if (scope.model.selectedAudioEvents.length > 0) {
-                                var index = scope.model.selectedAudioEvents.indexOf(itemToDelete);
-
-                                if (index >= 0) {
-                                    scope.model.selectedAudioEvents.splice(index, 1);
-                                }
-                            }
+//                            if (scope.model.selectedAudioEvents.length > 0) {
+//                                var index = scope.model.selectedAudioEvents.indexOf(itemToDelete);
+//
+//                                if (index >= 0) {
+//                                    scope.model.selectedAudioEvents.splice(index, 1);
+//                                }
+//                            }
                         });
                     }
                 });
@@ -422,5 +431,32 @@
             }
         }
     });
+
+    bawds.directive('bawChecked', function() {
+       return {
+           restict: 'A',
+           link: function radioInputType(scope, element, attr, ctrl) {
+               // make the name unique, if not defined
+               if (isUndefined(attr.name)) {
+                   element.attr('name', Number.Unique());
+               }
+
+               element.bind('click', function() {
+                   if (element[0].checked) {
+                       scope.$apply(function() {
+                           ctrl.$setViewValue(attr.value);
+                       });
+                   }
+               });
+
+               ctrl.$render = function() {
+                   var value = attr.value;
+                   element[0].checked = (value == ctrl.$viewValue);
+               };
+
+               attr.$observe('value', ctrl.$render);
+           }
+       }
+    });
 })();
 
diff --git a/app/assets/stylesheets/partials/_annotation_viewer.css.scss b/app/assets/stylesheets/partials/_annotation_viewer.css.scss
@@ -1,6 +1,8 @@
 @import "base";
 @import "../_dynamic.css.scss.erb";
 
+
+
 baw-annotation-viewer {
 
   & .tag-preview {
@@ -17,8 +19,11 @@ baw-annotation-viewer {
       //overflow: none;
 
       li {
+        border-bottom: red solid 1px;
+        margin-left: -6px;
         position: absolute;
-        top:  45px;
+        top:  42px;
+
 
         @include vendor-prefix(transform-origin, 0 0);
         @include vendor-prefix(transform, rotate3d(0,0,1,-20deg));
@@ -75,6 +80,17 @@ baw-annotation-viewer {
     border-color: nth($master-highlight, 2);
     position: absolute;
     background-color: rgba(255,255,255,0.05);
+    overflow: visible;
+
+    &:before {
+      border-left: red solid 1px;
+      height: 256px;
+      position: relative;
+      top: -257px;
+      left: -1px;
+      display: inline-block;
+      content: "";
+    }
 
     &[data-selected="true"] {
       border-color: nth($master-complementary, 2);

diff --git a/app/assets/templates/annotation_viewer.html b/app/assets/templates/annotation_viewer.html
@@ -1,7 +1,7 @@
 <div ng-controller="AnnotationViewerCtrl">
     <div class="tag-preview">
         <ul>
-            <li ng-repeat="annotation in model.audioEvents" ng-style="{left: ($index * 40) + 'px' }" >
+            <li ng-repeat="annotation in model.audioEvents" ng-style="{left: (positionLabel(annotation)) + 'px' }" >
                 <span ng-repeat="tag in annotation.audioEventTags">
                     {{getTag(tag.tagId)}}{{!$last && ',' || ''}}
                 </span>

diff --git a/app/assets/templates/listen.html b/app/assets/templates/listen.html
@@ -16,7 +16,7 @@ <h3>Spectrogram</h3>
 
         <h3>Audio Controls</h3>
         <audio id="main-player" ng-audio="model.audioElement" controls>
-            <source ng-repeat="url in model.media.audioUrls" ng-src="{{url.url}}" src="" type="{{url.mime}}" >
+            <source ng-repeat="url in model.media.audioUrls" ng-src="{{url.url}}" src="" type="{{url.mime}}">
             Your browser does not support the audio element.
         </audio>
         <div id="listenEditContainer">
@@ -27,12 +27,13 @@ <h3>
                 <span>Selected elements: {{model.selectedAudioEvents.length}}</span>
 
                 <form id="annotationEditForm" name="annotationEditForm"
-                      ng-repeat="selectedEvent in model.selectedAudioEvents">
+                      ng-repeat="selectedEvent in model.audioEvents | filter:selectedFilter">
                     <label>
                         <span>Tags</span>
                         <input type="hidden" ng-multiple="true" tags multiple ui-select2="{allowClear:true, tags:tags }"
-                                ng-model="selectedEvent.audioEventTags" />
-                            <!--<option ng-repeat="t in tags" value="{{t.id}}">{{t.text}} <span> &lt;!&ndash; ng-show={{t.type_of_tag}}&ndash;&gt;,-->
+                               ng-model="selectedEvent.audioEventTags"/>
+                        <!--<option ng-repeat="t in tags" value="{{t.id}}">{{t.text}} <span> &lt;!&ndash; ng-show={{t.type_of_tag}}&ndash;&gt;
+                        ,-->
                         <!--{{t.typeOfTag}} &lt;!&ndash; &ndash;&gt;</span></option>-->
 
                     </label>
@@ -72,6 +73,7 @@ <h3>Annotations</h3>
                 <table>
                     <thead>
                     <tr>
+                        <th>Selected</th>
                         <th>Annotation ID</th>
                         <th>Audio Recording</th>
                         <th>Created At</th>
@@ -87,6 +89,9 @@ <h3>Annotations</h3>
                     </thead>
                     <tbody>
                     <tr ng-repeat="ae in model.audioEvents">
+                        <td>
+                            <input type="radio" ng-checked="ae._selected" ng-model="ae._selected"   name="selectionRadioGroup"  >
+                        </td>
                         <td colspan="{{ae.id && 1 || 2}}">
                             {{ae.id}}
                     <span ng-hide="ae.id">
@@ -101,7 +106,7 @@ <h3>Annotations</h3>
                         <td>{{ae.deleterId}}</td>
                         <td>{{ae.updatedAt}}</td>
                         <td>{{ae.updaterId}}</td>
-                        <td><span ng-repeat="t in ae.audioEventTags">{{t.tagId}},</span></td>
+                        <td><span ng-repeat="t in ae.audioEventTags">{{t.tagId}}{{!$last && ',' || ''}}</span></td>
                         <td>{{ae.startTimeSeconds}} - {{ae.endTimeSeconds}}</td>
                         <td>{{ae.lowFrequencyHertz}} - {{ae.highFrequencyHertz}}</td>
                     </tr>

diff --git a/lib/assets/javascripts/functions.js b/lib/assets/javascripts/functions.js
@@ -135,4 +135,6 @@ var angularCopies = new (function Angular() {
             replace((pctEncodeSpaces ? null : /%20/g), '+');
     }
 
+    this.isUndefined = function isUndefined(value){return typeof value == 'undefined';}
+
 });
diff --git a/lib/assets/javascripts/jquery.drawabox.js b/lib/assets/javascripts/jquery.drawabox.js
@@ -133,7 +133,8 @@
             closeIconTemplate = "";
         }
 
-        $parent.append('<div '+ SELECTED_ATTRIBUTE +'="true" id="' + newId + '" class="boxItem ui-widget" style="overflow:hidden;width:' + width + 'px;height:' + height + 'px;">' + closeIconTemplate + '</div>');
+        // removed 'overflow:hidden' from default style... it was messing up a trick i was trying to do
+        $parent.append('<div '+ SELECTED_ATTRIBUTE +'="true" id="' + newId + '" class="boxItem ui-widget" style="width:' + width + 'px;height:' + height + 'px;">' + closeIconTemplate + '</div>');
 
         var $newBox = $('#' + newId);
         $newBox.attr(dataIdKey, uniqueId);
-Original file line number
+Diff line change
@@ Expand Up / @@ -135,4 +135,6 @@ var angularCopies = new (function Angular() { @@
                 replace((pctEncodeSpaces ? null : /%20/g), '+');
         }
+        this.isUndefined = function isUndefined(value){return typeof value == 'undefined';}
     });