Skip to content

Commit

Permalink
Worked on client side interfaces.
Browse files Browse the repository at this point in the history 
Implemented a system to automatically camelCase the ruby API's to match javascript naming frameworks.

Also worked on image url and audio url generation for listen page.

Still having problems working out scope for annotation-viewer.
  • Loading branch information
@atruskie
atruskie committed Dec 14, 2012
1 parent 9b63fc5 commit ced113b
Show file tree
Hide file tree
Showing 17 changed files with 2,097 additions and 192 deletions.
91 changes: 45 additions & 46 deletions app/assets/javascripts/angular/controllers/listen.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,12 @@
* @param $scope
* @param $resource
* @param $routeParams
* @param AudioRecording
* @param AudioEvent
* @constructor
* @param Tag
* @param Media
*/
function ListenCtrl($scope, $resource, $routeParams, AudioRecording, AudioEvent, Tag) {
function ListenCtrl($scope, $resource, $routeParams, Media, AudioEvent, Tag) {


$scope.errorState = !GUID_REGEXP.test($routeParams.recordingId);
Expand All @@ -19,57 +20,55 @@ function ListenCtrl($scope, $resource, $routeParams, AudioRecording, AudioEvent,
else {
var recordingId = $scope.recordingId = $routeParams.recordingId;

$scope.recording = AudioRecording.get($routeParams);

// HACK:
$scope.recordingurl = "/media/" + recordingId + "_0_120_0_11025.mp3";

//
// $scope.recording = AudioRecording.get($routeParams);
//
// // HACK:
// $scope.recordingurl = "/media/" + recordingId + "_0_120_0_11025.mp3";
//
//
// var spectrogramResource = $resource('/media/:recordingId', {recordingId: '@recordingId'}, {
// get: { method: 'GET', params: {recordingId: '@recordingId'}, isArray: false }
// });
// $scope.spectrogram = spectrogramResource.get($routeParams);
//
// // HACK:
// $scope.spectrogram.url = "/media/" + recordingId + "_0_120_0_11025_512_g.png" + "?" + angularCopies.toKeyValue($scope.authTokenParams());

var spectrogramResource = $resource('/media/:recordingId', {recordingId: '@recordingId'}, {
get: { method: 'GET', params: {recordingId: '@recordingId'}, isArray: false }
});
$scope.spectrogram = spectrogramResource.get($routeParams);
//$scope.model = $scope;

// HACK:
$scope.spectrogram.url = "/media/" + recordingId + "_0_120_0_11025_512_g.png" + "?" + angularCopies.toKeyValue($scope.authTokenParams());
$scope.$on('event:auth-loginRequired', function () {
$scope.spectrogram.url = "/media/" + recordingId + "_0_120_0_11025_512_g.png" + "?" + angularCopies.toKeyValue($scope.authTokenParams());
});
$scope.$on('event:auth-loginConfirmed', function () {
$scope.spectrogram.url = "/media/" + recordingId + "_0_120_0_11025_512_g.png" + "?" + angularCopies.toKeyValue($scope.authTokenParams());
});
var formatPaths = function () {
if ($scope.media && $scope.media.hasOwnProperty('recordingId')) {
$scope.media.imageUrl = $scope.media.spectrogramBaseUrl.format($scope.media) + "?" + $scope.authTokenQuery();
$scope.media.audioUrl = $scope.media.audioBaseUrl.format($scope.media) + "?" + $scope.authTokenQuery();
}
};
$scope.$on('event:auth-loginRequired', formatPaths);
$scope.$on('event:auth-loginConfirmed', formatPaths);

$scope.media = Media.get($routeParams, {},
function mediaGetSuccess() {
// reformat url's
formatPaths();
},
function mediaGetFailure() {
throw "boo booos";
});

// var audioEventResource = $resource('/audio_events?by_audio_id=:recordingId', {recordingId: '@recordingId'}, {
// get:
// });
$scope.audio_events = AudioEvent.query({by_audio_id: recordingId});

// TODO: add time bounds
$scope.audioEvents = AudioEvent.query({byAudioId: recordingId});

// 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 = Tag.query();

$scope.limits = {
time_min: 0.0,
time_max: 120.0,
freq_min: 0.0,
freq_max: 11025.0
timeMin: 0.0,
timeMax: 120.0,
freqMin: 0.0,
freqMax: 11025.0
};

$scope.selectedAnnotation = {
audio_event_tags: [-1],
start_time_seconds: 0.05,
end_time_seconds: 15.23,
low_frequency_hertz:1000,
high_frequency_hertz: 8753
};

$scope.clearSelected = function() {
$scope.selectedAnnotation = {};
Expand All @@ -79,8 +78,8 @@ function ListenCtrl($scope, $resource, $routeParams, AudioRecording, AudioEvent,
var a = angular.copy(this.selectedAnnotation);

// prep tags
a.audio_event_tags_attributes = a.audio_event_tags.map(function (v) {return {tag_id:v};});
delete a.audio_event_tags
a.audio_event_tags_attributes = a.audioEventTags.map(function (v) {return {tag_id:v};});
delete a.audioEventTtags

a.audio_recording_id = recordingId;

Expand All @@ -89,8 +88,8 @@ function ListenCtrl($scope, $resource, $routeParams, AudioRecording, AudioEvent,
console.log("Annotation creation successful");

// now update tag-list
$scope.audio_events.push(response);
$scope.selected_Annotation = response;
$scope.audioEvents.push(response);
$scope.selectedAnnotation = response;

},
function createAnnotationFailure(response, getResponseHeaders) {
Expand All @@ -114,4 +113,4 @@ function ListenCtrl($scope, $resource, $routeParams, AudioRecording, AudioEvent,
}
}

ListenCtrl.$inject = ['$scope', '$resource', '$routeParams', 'AudioRecording', 'AudioEvent', 'Tag'];
ListenCtrl.$inject = ['$scope', '$resource', '$routeParams', 'Media', 'AudioEvent', 'Tag'];
4 changes: 4 additions & 0 deletions app/assets/javascripts/angular/directives/auth.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,11 +17,15 @@ angular.module('angular-auth', ['http-auth-interceptor'])
login.hide();

scope.$on('event:auth-loginRequired', function () {
// TODO: add extra checks to stop multiple animations

if (login.is(':animated')) {
// noop
}
else {
console.warn("sliding login window down");
login.slideDown('slow', function () {

main.hide();
});
}
Expand Down
59 changes: 43 additions & 16 deletions app/assets/javascripts/angular/directives/directives.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,6 +93,18 @@


bawds.directive('bawAnnotationViewer', function () {
function resizeOrMove(b, box) {
if (b.id === box.id) {
b.left = box.left;
b.top = box.top;
b.width = box.width;
b.height = box.height;
}
else {
throw "Box ids do not match on resizing or move event";
}
}

return {
restrict: 'AE',
scope: {
Expand All @@ -112,30 +124,45 @@
scope.$canvas = $($element.find(".annotation-viewer img + div")[0]);

// init drawabox
scope.model.audio_events = scope.model.audio_events || [];
scope.model.audioEvents = scope.model.audioEvents || [];
scope.model.selectedEvents = scope.model.selectedEvents || [];

scope.$canvas.drawabox({
"newBox": function(){
console.log("newBox");
"newBox": function (newBox) {
console.log("newBox", newBox);

scope.model.audioEvents = newBox;
},
"boxSelected": function(){
console.log("boxSelected")
"boxSelected": function (selectedBox) {
console.log("boxSelected", selectedBox);

// support for multiple selections - remove the clear
scope.model.selectedEvents.length = 0;
scope.model.selectedEvents.shift(selectedBox);
},
"boxResizing": function (box) {
console.log("boxResizing", box);
resizeOrMove(scope.model.selectedEvents[0], box);

},
"boxResizing": function(){
console.log("boxResizing")
"boxResized": function (box) {
console.log("boxResized", box);
resizeOrMove(scope.model.selectedEvents[0], box);
},
"boxResized": function(){
console.log("boxResized")
"boxMoving": function (box) {
console.log("boxMoving");
resizeOrMove(scope.model.selectedEvents[0], box);
},
"boxMoving": function(){
console.log("boxMoving")}
,
"boxMoved": function(){
console.log("boxMoved")
"boxMoved": function (box) {
console.log("boxMoved");
resizeOrMove(scope.model.selectedEvents[0], box);
},
"boxDeleted": function(){
console.log("boxDeleted")
"boxDeleted": function (deletedBox) {
console.log("boxDeleted");

// TODO: is this done by reference? does it even work?;
_(scope.model.audioEvents).reject(function(item){return item.id === deletedBox.id;});
_(scope.model.selectedEvents).reject(function(item){return item.id === deletedBox.id;});
}
});

Expand Down
Loading

0 comments on commit ced113b

Please sign in to comment.