Skip to content

Commit

Permalink
remove dataset item id routing from citizen science
Browse files Browse the repository at this point in the history
  • Loading branch information
@peichins
peichins committed Aug 3, 2018
1 parent 1599960 commit a8a4723
Show file tree
Hide file tree
Showing 8 changed files with 246 additions and 151 deletions.
68 changes: 38 additions & 30 deletions src/app/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -280,36 +280,44 @@ angular.module("baw",
fullWidth: true,
reloadOnSearch: false
}).
when("/citsci", {
templateUrl: "citizenScience/citizenScience.tpl.html",
controller: "CitizenScienceController",
title: "Citizen Science Page",
fullWidth: true
}).
when("/citsci/bristlebird", {
templateUrl: "citizenScience/bristlebird/about.tpl.html",
controller: "BristlebirdAboutController",
title: "Bristlebird Citizen Science",
fullWidth: true
}).
when(convertRouteParams(paths.site.ngRoutes.citizenScience.listen), {
templateUrl: "citizenScience/bristlebird/listen.tpl.html",
controller: "BristlebirdController",
title: "Bristlebird Citizen Science",
fullWidth: true
}).
when("/citsci/ipswich", {
templateUrl: "citizenScience/ipswich/about.tpl.html",
controller: "IpswichAboutController",
title: "Ipswich School Citizen Science",
fullWidth: true
}).
when("/citsci/ipswich/listen", {
templateUrl: "citizenScience/ipswich/listen.tpl.html",
controller: "IpswichController",
title: "Ipswich School Citizen Science",
fullWidth: true
}).
when("/citsci", {
templateUrl: "citizenScience/citizenScience.tpl.html",
controller: "CitizenScienceController",
title: "Citizen Science Page",
fullWidth: true
}).
when("/citsci/bristlebird", {
templateUrl: "citizenScience/bristlebird/about.tpl.html",
controller: "BristlebirdAboutController",
title: "Bristlebird Citizen Science",
fullWidth: true
}).
when(convertRouteParams(paths.site.ngRoutes.citizenScience.listen), {
templateUrl: "citizenScience/bristlebird/listen.tpl.html",
controller: "BristlebirdController",
title: "Bristlebird Citizen Science",
fullWidth: true,
reloadOnUrl: false
}).
when(convertRouteParams(paths.site.ngRoutes.citizenScience.listenId), {
templateUrl: "citizenScience/bristlebird/listen.tpl.html",
controller: "BristlebirdController",
title: "Bristlebird Citizen Science",
fullWidth: true,
reloadOnUrl: false
}).
when("/citsci/ipswich", {
templateUrl: "citizenScience/ipswich/about.tpl.html",
controller: "IpswichAboutController",
title: "Ipswich School Citizen Science",
fullWidth: true
}).
when("/citsci/ipswich/listen", {
templateUrl: "citizenScience/ipswich/listen.tpl.html",
controller: "IpswichController",
title: "Ipswich School Citizen Science",
fullWidth: true
}).
when("/", {
templateUrl: paths.site.files.home,
controller: "HomeCtrl",
Expand Down
41 changes: 23 additions & 18 deletions src/app/citizenScience/bristlebird/bristlebird.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ class BristlebirdController {
* The current sample object, including sample id
* @type {number}
*/
self.currentSample = {};
$scope.currentItem = CsSamples.currentItem;

// to be populated after getting samples from dataset
$scope.media = null;
Expand Down Expand Up @@ -93,8 +93,6 @@ class BristlebirdController {

$scope.labels = [];

$scope.currentSample = {};

// the model passed to ngAudio
$scope.audioElementModel = CitizenScienceCommon.getAudioModel();

Expand All @@ -119,28 +117,33 @@ class BristlebirdController {
);

/**
* When the currentSample changes, change the current audio file / spectrogram to match it
* When the currentItem changes, change the current audio file / spectrogram to match it
*/
$scope.$watch("currentSample", function () {
if ($scope.currentSample.id !== undefined) {
self.showAudio($scope.currentSample.audioRecordingId, $scope.currentSample.startTimeSeconds, $scope.currentSample.endTimeSeconds);
// for now, we cycle through backgrounds arbitrarily, based on the id of the sample number
// todo: store background images as part of the dataset or cs project
var backgroundPath = self.backgroundPaths[parseInt($scope.currentSample.id) % (self.backgroundPaths.length - 1)];
backgroundImage.currentBackground = backgroundPath;
$scope.$broadcast("update-selected-labels", SampleLabels.getLabelsForSample($scope.currentSample.id));
// record that this sample has been viewed
SampleLabels.setValue($scope.currentSample.id);
$scope.numSamplesViewed = SampleLabels.getNumSamplesViewed();
}
});
$scope.$watch(function () {
return CsSamples.currentItem();
},
function (item, oldVal) {
if (item) {
self.showAudio(item.audioRecordingId, item.startTimeSeconds, item.endTimeSeconds);
// for now, we cycle through backgrounds arbitrarily, based on the id of the sample number
// todo: store background images as part of the dataset or cs project
var backgroundPath = self.backgroundPaths[parseInt(item.id) % (self.backgroundPaths.length - 1)];
backgroundImage.currentBackground = backgroundPath;
$scope.$broadcast("update-selected-labels", SampleLabels.getLabelsForSample(item.id));
// record that this sample has been viewed
SampleLabels.setValue(item.id);
$scope.numSamplesViewed = SampleLabels.getNumSamplesViewed();
}
}, true);

/**
* auto play feature
* when the playback arrives at the end of the audio, it will proceed to the next segment.
* The url for the next segment will be returned from the nextLink function, which
* is initialised to null, then reverse bound bound from the data progress component
*/
*TODO: make this work with non-url progress
$scope.nextLink = null;
$scope.$on(ngAudioEvents.ended, function navigate(event) {
var uriNext = $scope.nextLink();
Expand All @@ -152,6 +155,8 @@ class BristlebirdController {
}
});
*/

self.backgroundPaths = ["1.jpg", "2.jpg", "3.jpg", "4.jpg"].map(fn => paths.site.assets.backgrounds.citizenScience + fn);

}
Expand Down
8 changes: 3 additions & 5 deletions src/app/citizenScience/bristlebird/listen.tpl.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,11 +35,9 @@ <h2>Eastern Bristlebird Search

<nav class="cs-progress">

<dataset-progress
audio-element-model="audioElementModel"
current-sample="currentSample"
num-viewed="numSamplesViewed"
next-link="nextLink" ></dataset-progress>
<previous-play-next audio-element-model="audioElementModel"></previous-play-next>

<dataset-progress></dataset-progress>

<autoplay-button audio-element-model="audioElementModel"></autoplay-button>

Expand Down
83 changes: 26 additions & 57 deletions src/app/citizenScience/datasetProgress/datasetProgress.js
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,11 @@
/**
* Component that
* - contains the button to move to the next sample,
* - loads the correct sample if specified in the url
* - updates the selected labels to match what is stored for the selected sample
*/


angular.module("bawApp.components.progress", ["bawApp.citizenScience.csSamples"])
.component("datasetProgress", {
templateUrl: "citizenScience/datasetProgress/datasetProgress.tpl.html",
Expand All @@ -6,83 +14,44 @@ angular.module("bawApp.components.progress", ["bawApp.citizenScience.csSamples"]

var self = this;


$scope.selectItem = function (itemId) {
$scope.selectSampleById = function (itemId) {
console.log("selecting item", itemId);
self.currentSample = CsSamples.getSample(itemId);
if (self.currentSample) {
SampleLabels.registerCurrentSampleId(self.currentSample.id);
$scope.totalSamplesViewed = SampleLabels.getNumSamplesViewed();
console.log("setting selected to ", itemId);
}
CsSamples.selectById(itemId).then(x => {
console.log("selected sample ", x);
SampleLabels.registerCurrentSampleId(CsSamples.currentSample);
});
};

// don't do this yet, because we'll watch for ready
//$scope.selectItem($routeParams.sampleNum);

/**
* Load the new sample whenever the route params change.
*/
$scope.$watch(
function () {
return $routeParams.sampleNum;
}, function (newVal, oldVal) {
console.log("route params changed from ", oldVal, "to", newVal);

// call the api to get the sample based on the route params
$scope.selectItem($routeParams.sampleNum);

});

/**
* Load sample when the list of samples is ready
*/

$scope.$watch(
function () {
return CsSamples.isReady;
},
function (newVal, oldVal) {
if (newVal) {
$scope.selectItem($routeParams.sampleNum);
if ($routeParams.sampleNum) {
$scope.selectSampleById($routeParams.sampleNum);
}
},
true);
});


$scope.nextItem = function () {
console.log("next item");
CsSamples.nextItem();
SampleLabels.registerCurrentSampleId(CsSamples.currentItem());
};

//TODO: this gets called constantly while the audio is playing
/**
* returns a link for routing based on the id for the next and
* previous samples. That id is returned in the request for metadata of
* the current sample (contained in the route).
* @returns string
*
* @return {*}
*/
$scope.previousLink = function () {
if (self.currentSample.previousSampleId) {
return $url.formatUri(paths.site.ngRoutes.citizenScience.listen, {sampleNum: self.currentSample.previousSampleId});
} else {
return "";
}
$scope.nextDisabled = function () {
return !CsSamples.nextItemAvailable();
};
$scope.nextLink = function () {
if (self.currentSample.nextSampleId) {
return $url.formatUri(paths.site.ngRoutes.citizenScience.listen, {sampleNum: self.currentSample.nextSampleId});
} else {
return "";
}
};

// reverse binding of this functions to make
// them accessible to the parent controller for autoplay
self.nextLink = $scope.nextLink;

self.progressNav = true;

}],
bindings: {
audioElementModel: "=",
currentSample: "=",
numViewed: "=numViewed",
nextLink: "="
}
});
8 changes: 7 additions & 1 deletion src/app/citizenScience/datasetProgress/datasetProgress.tpl.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,16 @@
<div class="progressCell progress-counter">{{ totalSamplesViewed }}</div>
-->
<div class="btn-group">
<previous-play-next audio-element-model="$ctrl.audioElementModel" previous-link="previousLink" next-link="nextLink"></previous-play-next>
<button class="btn btn-default"
ng-disabled="nextDisabled()"
ng-click="nextItem()"
title="Next Clip">
<span class="glyphicon glyphicon-step-forward"></span>
</button>
</div>






Loading

0 comments on commit a8a4723

Please sign in to comment.