Skip to content

Commit

Permalink
Work on annotation editing javascript stuff
Browse files Browse the repository at this point in the history 
modified:   app/assets/javascripts/angular/controllers/listen.js
modified:   app/assets/javascripts/angular/directives/directives.js
modified:   lib/assets/javascripts/jquery.drawabox.js
  • Loading branch information
@atruskie
atruskie committed Dec 18, 2012
1 parent c4e03db commit 657ddb1
Show file tree
Hide file tree
Showing 3 changed files with 93 additions and 33 deletions.
6 changes: 3 additions & 3 deletions app/assets/javascripts/angular/controllers/listen.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,9 +39,9 @@ function ListenCtrl($scope, $resource, $routeParams, Media, AudioEvent, Tag) {
$scope.model = {};

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();
if ($scope.model.media && $scope.model.media.hasOwnProperty('recordingId')) {
$scope.model.media.imageUrl = $scope.model.media.spectrogramBaseUrl.format($scope.model.media) + "?" + $scope.authTokenQuery();
$scope.model.media.audioUrl = $scope.model.media.audioBaseUrl.format($scope.model.media) + "?" + $scope.authTokenQuery();
}
};
$scope.$on('event:auth-loginRequired', formatPaths);
Expand Down
107 changes: 82 additions & 25 deletions app/assets/javascripts/angular/directives/directives.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,18 +93,70 @@


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;

var converters = function () {
// TODO: these are stubs and will need to be refactored

// constants go here

return {
pixelsToSeconds: function pixelsToSeconds(value) {
return value;
},
pixelsToHertz: function pixelsToHertz(value) {
return value;
},
secondsToPixels: function secondsToPixels(value) {
return value;
},
hertzToPixels: function hertzToPixels(value) {
return value;
}
};
};

function resizeOrMove(audioEvent, box) {
if (audioEvent.__temporaryId__ === box.id) {
audioEvent.startTimeSeconds = box.left;
audioEvent.highFrequencyHertz = box.top;
//b.width = box.width;
//b.height = box.height;
audioEvent.endTimeSeconds = audioEvent.startTimeSeconds + box.width;
audioEvent.lowFrequencyHertz = audioEvent.highFrequencyHertz + box.height;
}
else {
throw "Box ids do not match on resizing or move event";
}
}

function touchUpdatedField(audioEvent) {
audioEvent.updatedAt = new Date();
}

function create(simpleBox, audioRecordingId) {
var now = new Date();
var audioEvent = {
id: 1,
__temporaryId__: simpleBox.id,
audioRecordingId: audioRecordingId,

createdAt: now,
updatedAt: now,

endTimeSeconds: 0.0,
highFrequencyHertz: 0.0,
isReference: false,
lowFrequencyHertz: 0.0,
startTimeSeconds: 0.0,
audioEventTags: []
};

resizeOrMove(audioEvent, simpleBox);
touchUpdatedField(audioEvent);

return audioEvent;
}

return {
restrict: 'AE',
scope: {
Expand All @@ -121,48 +173,53 @@
// assign a unique id to scope
scope.id = Number.Unique();

scope.$canvas = $($element.find(".annotation-viewer img + div")[0]);
scope.$canvas = $element.find(".annotation-viewer img + div").first();

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

scope.$canvas.drawabox({
"newBox": function (newBox) {
console.log("newBox", newBox);
"newBox": function (element, newBox) {
var newAudioEvent = create(newBox, "a dummy id!");
scope.model.audioEvents.push(newAudioEvent);

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

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

},
"boxResized": function (box) {
"boxResized": function (element, box) {
console.log("boxResized", box);
resizeOrMove(scope.model.selectedEvents[0], box);
resizeOrMove(scope.model.selectedAudioEvents[0], box);
},
"boxMoving": function (box) {
"boxMoving": function (element, box) {
console.log("boxMoving");
resizeOrMove(scope.model.selectedEvents[0], box);
resizeOrMove(scope.model.selectedAudioEvents[0], box);
},
"boxMoved": function (box) {
"boxMoved": function (element, box) {
console.log("boxMoved");
resizeOrMove(scope.model.selectedEvents[0], box);
resizeOrMove(scope.model.selectedAudioEvents[0], box);
},
"boxDeleted": function (deletedBox) {
"boxDeleted": function (element, 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;});
_(scope.model.audioEvents).reject(function (item) {
return item.id === deletedBox.id;
});
_(scope.model.selectedAudioEvents).reject(function (item) {
return item.id === deletedBox.id;
});
}
});

Expand Down
13 changes: 8 additions & 5 deletions lib/assets/javascripts/jquery.drawabox.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -177,8 +177,9 @@

contextData.maxChildrenReached = maxChildrenCheck(contextData.options.maxBoxes, $newBox);

// raise new box event
// raise new box event and selected events
contextData.options.newBox($newBox);
contextData.options.boxSelected($newBox);

return $newBox;
}
Expand Down Expand Up @@ -250,18 +251,20 @@
}
};
var getBox = function ($element) {
var selectedAttr = $element.attr(SELECTED_ATTRIBUTE);
return {
id: $element.attr(dataIdKey),
left: removePx($element.css("left")),
top: removePx($element.css("top")),
width: removePx($element.css("width")) + 2, // box model - border not included in widths
height: removePx($element.css("height")) + 2 // box model - border not included in widths
height: removePx($element.css("height")) + 2, // box model - border not included in widths
selected: (!!selectedAttr) && selectedAttr == "true"
};
};
var remap = function (value) {
var bevent = function (ele) {
var b = getBox(ele);
return value.apply(ele, [ele, b]);
var bevent = function (element) {
var boxSimpleData = getBox(element);
return value.apply(element, [element, boxSimpleData]);
};

return value ? bevent : (function () { });
Expand Down

0 comments on commit 657ddb1

Please sign in to comment.