From ad193e6ba826bc0be6eadb3d5ec98638fb363934 Mon Sep 17 00:00:00 2001 From: Philip Eichinski Date: Sun, 4 Jun 2017 18:47:40 +1000 Subject: [PATCH] feat(citizenScienceExamples): binding to checkbox value to label status for current sample, plus checkbox styling --- .../citizenScience/bristlebird/bristlebird.js | 78 ++++++++++++++++--- .../citizenScience/citizenScienceCommon.js | 3 +- .../textLabels/_citizenScienceLabels.scss | 15 +++- .../citizenScience/textLabels/labelCheck.js | 63 ++++----------- .../textLabels/labelCheck.tpl.html | 11 ++- .../citizenScience/thumbLabels/examples.js | 11 +-- .../thumbLabels/examples.tpl.html | 21 +---- src/app/citizenScience/thumbLabels/label.js | 50 ++++++------ .../citizenScience/thumbLabels/label.tpl.html | 25 ++++-- src/app/citizenScience/thumbLabels/labels.js | 35 +++++---- .../thumbLabels/labels.tpl.html | 6 +- 11 files changed, 173 insertions(+), 145 deletions(-) diff --git a/src/app/citizenScience/bristlebird/bristlebird.js b/src/app/citizenScience/bristlebird/bristlebird.js index 74776292..c4507e12 100644 --- a/src/app/citizenScience/bristlebird/bristlebird.js +++ b/src/app/citizenScience/bristlebird/bristlebird.js @@ -120,6 +120,49 @@ class BristlebirdController { }); + $scope.$on("label-toggle", function (e, labelNumber, value) { + self.toggleLabel(labelNumber, value); + }); + + + /** + * applies or removes the tag-sets from the given label number + * to the current sample + * @param labelNumber + */ + self.toggleLabel = function (labelNumber, value) { + + console.log("toggling lable ", labelNumber, value); + var currentSample = $scope.samples[$scope.currentSampleNum]; + if (typeof value === "boolean") { + currentSample.labels[labelNumber] = value; + } else { + currentSample.labels[labelNumber] = !currentSample.labels[labelNumber]; + } + + currentSample.done = true; + + var tags = $scope.labels.filter(function (value, index) { + return currentSample.labels[index]; + }).map(function (value) { + return value.tags; + }); + + console.log("new tags for sample: ", CitizenScienceCommon.labelsAsString(tags)); + + var url = CitizenScienceCommon.apiUrl("setLabels", + $scope.csProject, + currentSample.name, + currentSample.recordingId, + currentSample.startOffset, + CitizenScienceCommon.labelsAsString(tags)); + $http.get(url).then(function (response) { + console.log(response.data); + }); + + }; + + /** * Get settings from sheet */ @@ -133,18 +176,28 @@ class BristlebirdController { } }); - /** - * Sets the current sample to sampleNum - * @param sample_num int the index of the samples array of json objects - */ - $scope.goToSample = function (sampleNum) { - if (sampleNum < $scope.samples.length) { - $scope.currentSampleNum = sampleNum; - } else { - console.log("can't go to next sample because this is the last one"); - } + // /** + // * Sets the current sample to sampleNum + // * @param sample_num int the index of the samples array of json objects + // */ + // $scope.goToSample = function (sampleNum) { + // if (sampleNum < $scope.samples.length && sampleNum >= 0) { + // $scope.currentSampleNum = sampleNum; + // + // + // + // + // } else { + // console.log("can't go to next sample because this is the last one"); + // } + // + // }; + + + + + - }; /** * When the currentSampleNum changes, change the current audio file / spectrogram to match it @@ -156,6 +209,9 @@ class BristlebirdController { self.showAudio(currentSample.recordingId, currentSample.startOffset, self.sampleDuration); var backgroundPath = self.backgroundPaths[$scope.currentSampleNum % (self.backgroundPaths.length - 1)]; backgroundImage.currentBackground = backgroundPath; + + $scope.$broadcast("update-selected-labels", $scope.samples[$scope.currentSampleNum].labels); + } }); diff --git a/src/app/citizenScience/citizenScienceCommon.js b/src/app/citizenScience/citizenScienceCommon.js index e7b0b98f..ac1b8db6 100644 --- a/src/app/citizenScience/citizenScienceCommon.js +++ b/src/app/citizenScience/citizenScienceCommon.js @@ -168,7 +168,8 @@ citizenScienceCommon.factory("CitizenScienceCommon", [ var samples = response.data; $scope.samples = samples; self.initSampleLabels($scope.samples, $scope.labels); - $scope.goToSample(0); + //$scope.goToSample(0); + $scope.currentSampleNum = 0; }); } }; diff --git a/src/app/citizenScience/textLabels/_citizenScienceLabels.scss b/src/app/citizenScience/textLabels/_citizenScienceLabels.scss index 75905cb6..79f88b8b 100644 --- a/src/app/citizenScience/textLabels/_citizenScienceLabels.scss +++ b/src/app/citizenScience/textLabels/_citizenScienceLabels.scss @@ -1,14 +1,22 @@ .citizen-science { - #label-buttons { + #label-buttons { background: rgba(0, 0, 0, 0.6); width: 400px; margin: 0px auto 0px auto; text-align: center; border-radius: 8px; padding: 0px 20px 20px 20px; + } + + + + + + #label-buttons, .label-check { + a { @@ -21,15 +29,14 @@ font-size: 18px; cursor: pointer; line-height: 1em; - color: #fff; &.main-button { &:hover { - color: #eee; + color: #333; .checkbox { - border-color: #eee; + border-color: #333; } } diff --git a/src/app/citizenScience/textLabels/labelCheck.js b/src/app/citizenScience/textLabels/labelCheck.js index a2521aaf..79757806 100644 --- a/src/app/citizenScience/textLabels/labelCheck.js +++ b/src/app/citizenScience/textLabels/labelCheck.js @@ -3,14 +3,18 @@ angular.module("bawApp.components.citizenScienceLabelCheck", ["bawApp.citizenSci templateUrl: "citizenScience/textLabels/labelCheck.tpl.html", controller: [ "$scope", - "$http", - "CitizenScienceCommon", - function ($scope, $http, CitizenScienceCommon) { + function ($scope) { - //console.log("dataset progress component scope");console.log($scope); var self = this; + console.log("label check box for label ", self.label); + + // /** + // * Whether the label has been attached to the current sample + // */ + // $scope.isChecked = false; + // /** * Add or remove the label num to the list of selected labels for this sample * Send the new set of labels to the dataset @@ -19,53 +23,18 @@ angular.module("bawApp.components.citizenScienceLabelCheck", ["bawApp.citizenSci * resulting in the wrong labels being applied. * @param label string */ - $scope.toggleLabel = function (labelNum) { - - var currentSample = self.samples[self.currentSampleNum]; - - currentSample.labels[labelNum] = !currentSample.labels[labelNum]; - - currentSample.done = true; - - var tags = self.labels.filter(function (value, index) { - return currentSample.labels[index]; - }).map(function (value) { - return value.tags; - }); - - var url = CitizenScienceCommon.apiUrl("setLabels", - self.csProject, - currentSample.name, - currentSample.recordingId, - currentSample.startOffset, - CitizenScienceCommon.labelsAsString(tags)); - $http.get(url).then(function (response) { - console.log(response.data); - }); - - }; - - /** - * Whether the label has been attached to the current sample - * @param label Object - * @returns Boolean - */ - $scope.labelSelected = function () { - if(self.currentSampleNum === -1) { - return false; - } - var currentSample = self.samples[self.currentSampleNum]; - - return currentSample.labels[self.label.labelNumber]; - + $scope.toggleLabel = function () { + //$scope.isChecked = !$scope.isChecked; + //self.onToggle($scope.isChecked); + self.checked.value = !self.checked.value; + self.onToggleSelected(self.checked.value); }; }], bindings: { - label: "=", - samples: "=", - currentSampleNum: "=", - csProject: "=" + checked: "=", + onToggleSelected: "=", + text:"<" } }); \ No newline at end of file diff --git a/src/app/citizenScience/textLabels/labelCheck.tpl.html b/src/app/citizenScience/textLabels/labelCheck.tpl.html index 37b251f4..5c059efa 100644 --- a/src/app/citizenScience/textLabels/labelCheck.tpl.html +++ b/src/app/citizenScience/textLabels/labelCheck.tpl.html @@ -1,6 +1,11 @@ - +
+ + + {{label.name}} + ng-class="{true: 'fa-check-square-o', false : 'fa-square-o'}[$ctrl.checked.value]" + aria-hidden="true">{{$ctrl.text}} + +
\ No newline at end of file diff --git a/src/app/citizenScience/thumbLabels/examples.js b/src/app/citizenScience/thumbLabels/examples.js index e8a96f73..260f0c27 100644 --- a/src/app/citizenScience/thumbLabels/examples.js +++ b/src/app/citizenScience/thumbLabels/examples.js @@ -6,6 +6,7 @@ angular.module("bawApp.components.citizenScienceThumbLabels.examples", ]) .component("citizenScienceLabelExamples", { templateUrl: "citizenScience/thumbLabels/examples.tpl.html", + transclude: true, controller: [ "$scope", "$http", @@ -17,6 +18,7 @@ angular.module("bawApp.components.citizenScienceThumbLabels.examples", var self = this; + $scope.currentExample = -1; $scope.changeCurrentExample = function (labelNum, changeBy) { @@ -59,8 +61,6 @@ angular.module("bawApp.components.citizenScienceThumbLabels.examples", }], bindings: { label: "=", - samples: "=", - currentSampleNum: "=" } }).directive("centerInWindow", ["$window", function ($window) { @@ -69,23 +69,16 @@ angular.module("bawApp.components.citizenScienceThumbLabels.examples", link: function (scope, $element) { var el = $element[0]; - function recenter (){ - if (!el || !el.offsetParent) { return; } - var offset = el.offsetParent.getBoundingClientRect().left; - el.style.width = $window.innerWidth - 50 + "px"; - el.style.left = (15-offset) + "px"; - } recenter(); - angular.element($window).bind("resize", recenter); } diff --git a/src/app/citizenScience/thumbLabels/examples.tpl.html b/src/app/citizenScience/thumbLabels/examples.tpl.html index 0e04b8d7..1a7e4c30 100644 --- a/src/app/citizenScience/thumbLabels/examples.tpl.html +++ b/src/app/citizenScience/thumbLabels/examples.tpl.html @@ -1,24 +1,11 @@
-

- - {{$ctrl.label.name}} example{{(annotations.length) > 1 ? 's' : ''}} - - -

+ + + + -
diff --git a/src/app/citizenScience/thumbLabels/label.js b/src/app/citizenScience/thumbLabels/label.js index d4eac077..60163d0b 100644 --- a/src/app/citizenScience/thumbLabels/label.js +++ b/src/app/citizenScience/thumbLabels/label.js @@ -11,42 +11,44 @@ angular.module("bawApp.components.citizenScienceThumbLabels.label", var self = this; - $scope.selected = function () { - return self.selectedLabelNum.value === self.label.labelNumber; - }; - - - $scope.toggleSelected = function () { + $scope.selected = { value: false }; - console.log("toggling state for label number", self.label.labelNumber); - - console.log("old selected label num:", self.selectedLabelNum.value); - - //$scope.selected = self.onToggleSelected(self.labelNum); + $scope.isShowingDetails = function () { + return self.currentDetailsLabelNum.value === self.label.labelNumber; + }; - if (self.selectedLabelNum.value === self.label.labelNumber) { - self.selectedLabelNum.value = -1; + /** + * toggles whether the details pane is showing for the current label + */ + $scope.toggleShowDetails = function () { + console.log("one"); + if ($scope.isShowingDetails()) { + self.currentDetailsLabelNum.value = -1; } else { - self.selectedLabelNum.value = self.label.labelNumber; - $scope.$emit("examples-position", ($element[0].offsetTop)); + self.currentDetailsLabelNum.value = self.label.labelNumber; } + console.log("showing details for label num:", self.currentDetailsLabelNum.value); + }; - console.log("new selected label num:", self.selectedLabelNum.value); - + /** + * callback when this label is either attached or detached from the current sample + * @param isSelected Boolean + */ + self.onToggleSelected = function (isSelected) { + console.log("label ", self.label.name, "selected value for sample x set to", isSelected); + $scope.$emit("label-toggle", self.label.labelNumber, isSelected); }; + $scope.$on("update-selected-labels", function (e, labelSelections) { + $scope.selected.value = labelSelections[self.label.labelNumber]; + }); + }], bindings: { label: "=", - onToggleSelected: "<", - selectedLabelNum: "=", - - samples: "=samples", - currentSampleNum: "=currentSampleNum", - csProject: "=csProject" - + currentDetailsLabelNum: "=", } }); \ No newline at end of file diff --git a/src/app/citizenScience/thumbLabels/label.tpl.html b/src/app/citizenScience/thumbLabels/label.tpl.html index af771de9..a9f6bfe9 100644 --- a/src/app/citizenScience/thumbLabels/label.tpl.html +++ b/src/app/citizenScience/thumbLabels/label.tpl.html @@ -1,17 +1,28 @@ -
+
-
+
{{$ctrl.label.name}}
+ on-toggle-selected="$ctrl.onToggleSelected" + ng-if="isShowingDetails()" + > + + + + + + + + +
\ No newline at end of file diff --git a/src/app/citizenScience/thumbLabels/labels.js b/src/app/citizenScience/thumbLabels/labels.js index 4fff9392..89275fdf 100644 --- a/src/app/citizenScience/thumbLabels/labels.js +++ b/src/app/citizenScience/thumbLabels/labels.js @@ -22,30 +22,34 @@ angular.module("bawApp.components.citizenScienceThumbLabels", var self = this; - $scope.selectedLabelNum = {value: -1}; + console.log(" --- current sample num (labels) ", self.currentSampleNum); - $scope.onToggleSelected = function (labelNum) { - console.log("onToggleSelected", labelNum); + $scope.currentDetailsLabelNum = {value: -1}; - if ($scope.selectedLabelNum.value === labelNum) { - $scope.selectedLabelNum.value = -1; - } else { - $scope.selectedLabelNum.value = labelNum; - } - - }; + // $scope.onToggleShowInfo = function (labelNum) { + // console.log("onToggleSelected", labelNum); + // + // if ($scope.selectedLabelNum.value === labelNum) { + // $scope.selectedLabelNum.value = -1; + // } else { + // $scope.selectedLabelNum.value = labelNum; + // } + // + // }; $scope.examplesPosition = "0px"; - $scope.$on("examples-position", function (event, newPosition) { + // $scope.$on("examples-position", function (event, newPosition) { + // console.log("examples-position has changed: ", newPosition); + // $scope.examplesPosition = newPosition + "px"; + // }); - console.log("examples-position has changed: ", newPosition); + $scope.$on("update-selected-labels", function (e, sampleNum) { - $scope.examplesPosition = newPosition + "px"; - }); + }); $scope.$watch(function () { @@ -127,8 +131,5 @@ angular.module("bawApp.components.citizenScienceThumbLabels", }], bindings: { labels: "=", - samples: "=", - currentSampleNum: "=", - csProject: "=" } }); \ No newline at end of file diff --git a/src/app/citizenScience/thumbLabels/labels.tpl.html b/src/app/citizenScience/thumbLabels/labels.tpl.html index 672937d7..ba421502 100644 --- a/src/app/citizenScience/thumbLabels/labels.tpl.html +++ b/src/app/citizenScience/thumbLabels/labels.tpl.html @@ -6,11 +6,7 @@ class="label-thumbs" ng-if="label.examples.length" label="label" - selected-label-num="selectedLabelNum" - on-toggle-selected="onToggleSelected" - samples="$ctrl.samples" - currentSampleNum="$ctrl.currentSampleNum" - csProject="$ctrl.csProject" + current-details-label-num="currentDetailsLabelNum" >