Merge pull request #46 from QutBioacoustics/spectroLoading

Closes #22 and closes #19. Fixed height for specgrogram container, loadi...
QutEcoacoustics · Dec 11, 2013 · 832b561 · 832b561
2 parents d4a449b + f3c5e97
commit 832b561
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 6 deletions.
diff --git a/src/app/annotationViewer/_annotation_viewer.scss b/src/app/annotationViewer/_annotation_viewer.scss
@@ -11,9 +11,19 @@ $marqueeBorderColorInactive: #00FF00;
 
 baw-annotation-viewer {
 
+
+
   width: 100%;
   text-align: center;
 
+
+
+  & .annotation-viewer-ctrl {
+    background: url(/assets/img/load.gif) center center no-repeat;
+
+  }
+
+
   & #scroller {
     display: inline-block;
   }
@@ -59,13 +69,13 @@ baw-annotation-viewer {
 
 
   & #scroller{
+
     overflow-x: scroll;
     overflow-y: hidden;
     line-height: 0;
   }
 
   & .annotation-viewer {
-
     display: inline-block;
     position: relative;
     line-height: 0;
@@ -74,7 +84,11 @@ baw-annotation-viewer {
 
 
     & img {
-
+      /* set a temporary height to avoid UI jumping around on image load
+          -- note: this value is usually overridden with a element level style by
+          the enforcedImageHeight value model.
+        */
+      height: 256px;
     }
 
     // overlay

diff --git a/src/app/annotationViewer/annotationViewer.tpl.html b/src/app/annotationViewer/annotationViewer.tpl.html
@@ -1,5 +1,6 @@
-<div ng-controller="AnnotationViewerCtrl">
+<div ng-controller="AnnotationViewerCtrl" class="annotation-viewer-ctrl">
 
+
 
     <div id="scroller">
         <div class="tag-preview">
@@ -17,7 +18,7 @@
         </div>
         <div class="annotation-viewer" id="annotation-viewer_{{id}}" >
             <img ng-src="{{model.media.spectrogram.url}}" src=""
-                 ng-style="{width: model.converters.enforcedImageWidth, height: model.converters.enforcedImageHeight}">
+                 ng-style="{width: model.converters.conversions.enforcedImageWidth, height: model.converters.conversions.enforcedImageHeight}">
             <div id="spectrogramAnnotations_{{id}}" ></div>
             <div class="positionLine" baw-translate-x="positionLine()"></div>
         </div>

diff --git a/src/app/listen/listen.tpl.html b/src/app/listen/listen.tpl.html
@@ -7,6 +7,7 @@
 
         <h4 class="center-block">Site: {{model.audioRecording.siteId}}, <span class="hint absolute-time hint--top">{{absoluteDateChunkStart() | moment:"format":"dddd, MMMM Do YYYY, HH:mm:ss ZZ"}}</span><span></span>
         </h4>
+
         <baw-annotation-viewer model="model"></baw-annotation-viewer>
 
         <div id="chunkTimeStamps" class="clear-pseudo">
@@ -18,7 +19,7 @@ <h4 class="center-block">Site: {{model.audioRecording.siteId}}, <span class="hin
 
 
                 <div class="btn-group">
-                    <a class="btn btn-default" ng-href="{{createNavigationHref('previous')}}" ng-disabled="!previousEnabled">
+                    <a class="btn btn-default" ng-href="{{createNavigationHref('previous')}}" ng-disabled="!previousEnabled" title="Previous Recording">
                         <span class="glyphicon glyphicon-step-backward"></span>
                     </a>
                 </div>
@@ -35,7 +36,7 @@ <h4 class="center-block">Site: {{model.audioRecording.siteId}}, <span class="hin
 
                 </div>
                 <div class="btn-group">
-                    <a class="btn btn-default" ng-href="{{createNavigationHref('next')}}" ng-disabled="!nextEnabled">
+                    <a class="btn btn-default" ng-href="{{createNavigationHref('next')}}" ng-disabled="!nextEnabled" title="Next Recording">
                         <span class="glyphicon glyphicon-step-forward"></span>
                     </a>
                 </div>

diff --git a/src/assets/img/load.gif b/src/assets/img/load.gif