Skip to content

Commit

Permalink
trying to fix it
Browse files Browse the repository at this point in the history
  • Loading branch information
@atruskie
atruskie committed Mar 30, 2013
1 parent 91a761f commit 818ada2
Show file tree
Hide file tree
Showing 2 changed files with 86 additions and 75 deletions.
8 changes: 5 additions & 3 deletions app/assets/javascripts/angular/controllers/experiments.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@

// download experiment protocol
var experiment = $routeParams.experiment == "tour" ? '/experiment_assets/bird_tour.json' : '/experiment_assets/rapid_scan.json';
var experiment = experiment += "?antiCache=" + Date.now().toString();
experiment += "?antiCache=" + Date.now().toString();
$http.get(experiment).
success(function (data, status, headers, config) {
$scope.spec = data;
Expand Down Expand Up @@ -262,10 +262,10 @@
lowestCode = keys[rand];
}
else {
lowestCode = lowestCodes[1];
lowestCode = lowestCodes[0];
}

if (lowestCode.length !== 2) {
if (!lowestCode || lowestCode.length !== 2) {
throw "Experiment configuration incorrect";
}

Expand Down Expand Up @@ -362,6 +362,7 @@

$scope.stepResults.flashes[0].show = true;
$scope.currentFlash = 0;
$scope.segment = $scope.flashes[$scope.currentFlash];

$scope.countDown = $scope.bigScope.spec.countDown;

Expand Down Expand Up @@ -447,6 +448,7 @@

$scope.stepResults.flashes[$scope.currentFlash].show = false;
$scope.currentFlash++;
$scope.segment = $stepResults.flashes[$scope.currentFlash];

$scope.focus();

Expand Down
153 changes: 81 additions & 72 deletions app/assets/templates/rapid_scanning_experiment.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,30 +60,28 @@
text-align: left;
}

/*.instructions > div img {*/
/*.instructions > div img {*/
/*display: block;*/
/*margin: 0 auto;*/
/*}*/
/*}*/

.demoSpectrogram {
position: relative;
width: 100%;
width: 100%;

}

.demoSpectrogram span {
color: #f3f3f3;
font-size: x-large;
color: #f3f3f3;
font-size: x-large;
font-weight: bold;
padding: 0.05em 0.2em;
padding: 0.05em 0.2em;
text-shadow: black 0px 0px 5px;



}

.demoSpectrogram *:not(.baseImage) {
-webkit-animation: fadeIn 4.0s ease-in-out 0.25s infinite alternate;
-webkit-animation: fadeIn 4.0s ease-in-out 0.25s infinite alternate;
}

@-webkit-keyframes fadeIn {
Expand All @@ -97,54 +95,55 @@

.overlay {
position: absolute;
top: 0;
left: 0;
top: 0;
left: 0;

}

.grunt {
position: absolute;
top: 190px;
left: 28px;
top: 190px;
left: 28px;
}

.inhale {
position: absolute;
top: 60px;
left: 527px;;
top: 60px;
left: 527px;;
}

.arrow_box {
/*position: relative;*/
/*background: rgba(0, 255, 0, 1.0);*/
border: 2px solid #00ff00;
}

.arrow_box:after, .arrow_box:before {
top: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
top: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}

.arrow_box:after {
border-color: rgba(111, 213, 100, 0);
border-color: rgba(111, 213, 100, 0);
border-top-color: rgba(111, 213, 100, 0.5);
border-width: 10px;
left: 50%;
margin-left: -10px;
border-width: 10px;
left: 50%;
margin-left: -10px;
}

.arrow_box:before {
border-color: rgba(0, 255, 0, 0);
border-color: rgba(0, 255, 0, 0);
border-top-color: #00ff00;
border-width: 13px;
left: 50%;
margin-left: -13px;
border-width: 13px;
left: 50%;
margin-left: -13px;
}


.experimentContainer .header {
height: 65px;
}
Expand All @@ -153,16 +152,16 @@
position: absolute;
right: 0px;
top: -120px;
width: 100px;
height: 120px;
width: 100px;
height: 120px;
}

.spectrogramImage {
-webkit-box-shadow: 2px 2px 7px black;
margin: 5px auto;
height: 256px;
background-image: -webkit-gradient(radial, center center, 0, center center, 506, color-stop(0, #FFFFFF), color-stop(1, #ABABAB));
display: block;
display: block;
}

.spectrogramImage p {
Expand Down Expand Up @@ -213,7 +212,7 @@
background: #eee;
width: 100px;
height: 100px;
position: relative;
position: relative;
}

.spinner-inner {
Expand All @@ -226,7 +225,7 @@
height: 0;
border-style: solid;
border-color: transparent;
border-top-color: rgb(72, 129, 54);/*rgba(200, 200, 200, 1);*/
border-top-color: rgb(72, 129, 54); /*rgba(200, 200, 200, 1);*/
-webkit-transform: rotate(-45deg);
-webkit-animation: inner 15s linear infinite;
}
Expand Down Expand Up @@ -259,7 +258,7 @@
height: 0;
border-style: solid;
border-color: transparent;
border-top-color: rgb(72, 129, 54);/*rgba(200, 200, 200, 1);*/
border-top-color: rgb(72, 129, 54); /*rgba(200, 200, 200, 1);*/
-webkit-transform: rotate(45deg);
-webkit-animation: mask-two 15s linear infinite;
}
Expand All @@ -273,13 +272,13 @@
}
26% {

border-left-color: rgba(72, 129, 54, 1);/*rgba(200, 200, 200, 1);*/
border-left-color: rgba(72, 129, 54, 1); /*rgba(200, 200, 200, 1);*/
}
50% {
border-bottom-color: transparent;
}
51% {
border-bottom-color: rgba(72, 129, 54, 1);/*rgba(200, 200, 200, 1);*/
border-bottom-color: rgba(72, 129, 54, 1); /*rgba(200, 200, 200, 1);*/
}
75% {
border-right-color: transparent;
Expand All @@ -289,9 +288,9 @@
}
100% {
-webkit-transform: rotate(315deg);
border-left-color: rgba(72, 129, 54, 1);/*rgba(200, 200, 200, 1);*/
border-bottom-color: rgba(72, 129, 54, 1);/*rgba(200, 200, 200, 1);*/
border-right-color: rgba(72, 129, 54, 1);/*rgba(200, 200, 200, 1);*/
border-left-color: rgba(72, 129, 54, 1); /*rgba(200, 200, 200, 1);*/
border-bottom-color: rgba(72, 129, 54, 1); /*rgba(200, 200, 200, 1);*/
border-right-color: rgba(72, 129, 54, 1); /*rgba(200, 200, 200, 1);*/
}
}

Expand Down Expand Up @@ -360,12 +359,12 @@ <h4>{{stepResults.name}}, exposure <em>{{stepResults.speed.speed}}</em>s</h4>

<div class="demoSpectrogram">
<img class="baseImage" src="/experiment_assets/koala_demo3.jpg">
<img class="overlay" src="/experiment_assets/overlays.png" >
<img class="overlay" src="/experiment_assets/overlays.png">
<span class="grunt arrow_box">snore</span>
<span class="inhale arrow_box">snort</span>
</div>
<p>
Study this image carefully before proceeding.
Study this image carefully before proceeding.
</p>

<p>
Expand All @@ -382,7 +381,8 @@ <h4>{{stepResults.name}}, exposure <em>{{stepResults.speed.speed}}</em>s</h4>
You are doing test number <em>{{bigScope.step}}</em> of
<em>{{bigScope.spec.experimentSteps.length}}</em>.
<br/>
This test will show each flash card (spectrogram image) for <em style="font-weight: bolder; font-size: xx-large">{{stepResults.speed.speed | number:2}}</em>
This test will show each flash card (spectrogram image) for <em
style="font-weight: bolder; font-size: xx-large">{{stepResults.speed.speed | number:2}}</em>
seconds.
<br/>
This test will show <em>{{stepResults.flashes.length}}</em> flash cards (spectrogram images).
Expand All @@ -393,46 +393,50 @@ <h4>{{stepResults.name}}, exposure <em>{{stepResults.speed.speed}}</em>s</h4>
<span ng-bind-html-unsafe="stepResults.speed.notes"> </span>
</p>

<p ng-show="downloading() < stepResults.flashes.length" >
The expriment is downloading, please wait: <progress value="{{downloading()}}" max="{{stepResults.flashes.length}}"></progress></p>
<p ng-show="downloading() < stepResults.flashes.length">
The expriment is downloading, please wait:
<progress value="{{downloading()}}" max="{{stepResults.flashes.length}}"></progress>
</p>
<p ng-show="downloading() == stepResults.flashes.length">

The test will start immediately after you press the button below - get ready.
</p>
</div>
<button ng-disabled="downloading()" ng-click="start()">I understand the instructions, let's go</button>
<button ng-disabled="downloading()" ng-click="start()">I understand the instructions, let's go</button>
</div>

<div style="height:600px; vertical-align: middle;" ng-show="!showInstructions"
ui-keydown="{'17-ctrl':'hit($event)', '16-shift':'hit($event)', 'left':'hit($event)', 'right':'hit($event)', 'space': 'pauseOrResume($event)'}"
tabindex="1" id="experimentKeyPressDiv">
<div id="{{'step_' +($index + 1)}}" >
<!--ng-repeat="step in bigScope.spec.experimentSteps" ng-show="bigScope.step == $index + 1">-->
<div id="{{'step_' +($index + 1)}}">
<!--ng-repeat="step in bigScope.spec.experimentSteps" ng-show="bigScope.step == $index + 1">-->
<div class="header">
<h4>{{stepResults.name}}, exposure {{stepResults.speed.speed}}s</h4>
{{stepResults.extraInstructions}}
<p ng-bind-html-unsafe="stepResults.speed.notes"> </p>
<p ng-bind-html-unsafe="stepResults.speed.notes"></p>
</div>

<div>
<ul class="imageList" ng-class="clear-pseudo">
<li ng-class="clear-pseudo" style="margin: 1em auto; position: relative"
ng-repeat="segment in stepResults.flashes" ng-show="segment.show"
ng-style="{width: SPECTROGRAM_WIDTH + 'px'}">
<div class="imageList"
ng-class="clear-pseudo"
style="margin: 1em auto; position: relative"
ng-style="{width: SPECTROGRAM_WIDTH + 'px'}" >

<!--ng-repeat="segment in stepResults.flashes" ng-show="segment.show"-->

<div class="countDownTimer">
<div>Flash timer</div>
<div class="spinner">
<div class="spinner-inner"
ng-style="{ '-webkit-animation': 'inner ' + animationText(), '-webkit-animation-play-state': animationControl()}"
></div>
<div class="spinner-mask"
ng-style="{ '-webkit-animation': 'mask ' + animationText(), '-webkit-animation-play-state': animationControl() }"
></div>
<div class="spinner-mask-two"
ng-style="{ '-webkit-animation': 'mask-two ' + animationText(), '-webkit-animation-play-state': animationControl() }"
></div>
</div>
<div class="spinner">
<div class="spinner-inner"
ng-style="{ '-webkit-animation': 'inner ' + animationText(), '-webkit-animation-play-state': animationControl()}"
></div>
<div class="spinner-mask"
ng-style="{ '-webkit-animation': 'mask ' + animationText(), '-webkit-animation-play-state': animationControl() }"
></div>
<div class="spinner-mask-two"
ng-style="{ '-webkit-animation': 'mask-two ' + animationText(), '-webkit-animation-play-state': animationControl() }"
></div>
</div>
</div>


Expand All @@ -447,10 +451,14 @@ <h4>{{stepResults.name}}, exposure {{stepResults.speed.speed}}s</h4>
{{countDown}}
</P>
</div>
<ul></ul>
<img class="spectrogramImage" ng-show="countDown == 0"
ng-style="{width: SPECTROGRAM_WIDTH + 'px'}"
ng-src="{{segment.imageLink}}" > <!-- baw-image-loaded="segment.downloaded"-->
<ul>
<li ng-repeat="segment in stepResults.flashes">
<img class="spectrogramImage" ng-show="countDown == 0"
ng-style="{width: SPECTROGRAM_WIDTH + 'px'}"
ng-src="{{segment.imageLink}}">
</li>
</ul>
<!-- baw-image-loaded="segment.downloaded"-->

<div>
<span style="float:left">Starting time: <span class="relative-chunk-time hint--bottom">{{ft(segment.start)}}</span></span>
Expand Down Expand Up @@ -486,10 +494,11 @@ <h4>{{stepResults.name}}, exposure {{stepResults.speed.speed}}s</h4>
<span ng-show="paused">Resume</span>
</button>

</li>
</ul>

<div ng-hide="showDoneButton">Progress through flash cards ({{currentFlash + 1}}/{{stepResults.flashes.length}})
</div>

<div ng-hide="showDoneButton">Progress through flash cards ({{currentFlash +
1}}/{{stepResults.flashes.length}})
<meter value="{{currentFlash + 1}}" max="{{stepResults.flashes.length}}"></meter>
</div>

Expand Down

0 comments on commit 818ada2

Please sign in to comment.