changeset 106:fe6b0c525a7d

Use matrix layer for matrix features

--- a/package.json	Mon Mar 06 11:29:47 2017 +0000
+++ b/package.json	Thu Mar 09 15:51:34 2017 +0000
@@ -27,7 +27,7 @@
     "requirejs": "^2.3.2",
     "rxjs": "5.0.0-beta.12",
     "ts-helpers": "^1.1.1",
-    "waves-ui": "github:cannam/waves-ui#22679ac96808d3d2d9360202849908a0efb16e75",
+    "waves-ui": "github:cannam/waves-ui#f6c07565837ee9cb1ddfbb406541b0b3967c11b0",
     "zone.js": "^0.6.23"
   },
   "devDependencies": {

--- a/src/app/waveform/waveform.component.ts	Mon Mar 06 11:29:47 2017 +0000
+++ b/src/app/waveform/waveform.component.ts	Thu Mar 09 15:51:34 2017 +0000
@@ -139,10 +139,11 @@
       this.timeline = this.renderTimeline(buffer.duration)
     }
     this.timeline.timeContext.offset = 0.5 * this.timeline.timeContext.visibleDuration;
+
     // time axis
     const timeAxis = new wavesUI.helpers.TimeAxisLayer({
       height: height,
-      color: 'gray'
+      color: '#b0b0b0'
     });
     this.addLayer(timeAxis, mainTrack, this.timeline.timeContext, true);
 
@@ -152,7 +153,15 @@
       color: 'darkblue'
     });
     this.addLayer(waveformLayer, mainTrack, this.timeline.timeContext);
-
+/*
+    const spectrogramLayer = new wavesUI.helpers.SpectrogramLayer(buffer, {
+      top: 10,
+      height: height * 0.9,
+      stepSize: 512,
+      fftSize: 1024
+    });
+    this.addLayer(spectrogramLayer, mainTrack, this.timeline.timeContext);
+*/      
     this.cursorLayer = new wavesUI.helpers.CursorLayer({
       height: height
     });
@@ -331,11 +340,27 @@
             this.timeline.timeContext
           ), colour);
         }
-
         break;
       }
+      case 'matrix': {
+          const stepDuration = (features as FixedSpacedFeatures).stepDuration;
+          const matrixData = (features.data as Float32Array[]);
+          if (matrixData.length === 0) return;
+          const matrixEntity = new wavesUI.utils.PrefilledMatrixEntity(matrixData);
+          let matrixLayer = new wavesUI.helpers.MatrixLayer(matrixEntity, {
+              color: colour,
+              height: height
+          });
+          this.colouredLayers.set(this.addLayer(
+              matrixLayer,
+              mainTrack,
+              this.timeline.timeContext
+          ), colour);
+          break;
+      }
       default:
-        console.log('Cannot render an appropriate layer.');
+        console.log("Cannot render an appropriate layer for feature shape '" +
+                    features.shape + "'");
     }
 
     this.timeline.tracks.update();
@@ -362,17 +387,17 @@
         if (mustPageForward) {
           const hasSkippedMultiplePages = offsetTimestamp - visibleDuration > visibleDuration;
 
-          this.timeline.timeContext.offset = hasSkippedMultiplePages
-              ? -currentTime +  0.5 * visibleDuration
-              :  currentOffset - visibleDuration;
+            this.timeline.timeContext.offset = hasSkippedMultiplePages ?
+                -currentTime +  0.5 * visibleDuration :
+                currentOffset - visibleDuration;
           this.timeline.tracks.update();
         }
 
         if (mustPageBackward) {
           const hasSkippedMultiplePages = currentTime + visibleDuration < -currentOffset;
-          this.timeline.timeContext.offset = hasSkippedMultiplePages
-            ? -currentTime + 0.5 * visibleDuration
-            : currentOffset + visibleDuration;
+            this.timeline.timeContext.offset = hasSkippedMultiplePages ?
+                -currentTime + 0.5 * visibleDuration :
+                currentOffset + visibleDuration;
           this.timeline.tracks.update();
         }