changeset 263:4c1c19fbcf70

Merge branch 'master' of ssh://github.com:/piper-audio/ugly-duckling

--- a/src/app/waveform/waveform.component.ts	Fri Apr 28 14:20:43 2017 +0100
+++ b/src/app/waveform/waveform.component.ts	Fri Apr 28 14:31:24 2017 +0100
@@ -32,11 +32,28 @@
 type Track = any;
 type Colour = string;
 
+const colours = function* () {
+  const circularColours = [
+    '#0868ac', // "sapphire blue", our waveform / header colour
+    '#c33c54', // "brick red"
+    '#17bebb', // "tiffany blue"
+    '#001021', // "rich black"
+    '#fa8334', // "mango tango"
+    '#034748' // "deep jungle green"
+  ];
+  let index = 0;
+  const nColours = circularColours.length;
+  while (true) {
+    yield circularColours[index = ++index % nColours];
+  }
+}();
+
 @Component({
   selector: 'ugly-waveform',
   templateUrl: './waveform.component.html',
   styleUrls: ['./waveform.component.css']
 })
+
 export class WaveformComponent implements OnInit, AfterViewInit, OnDestroy {
 
   @ViewChild('track') trackDiv: ElementRef;
@@ -48,22 +65,7 @@
       if (this.featureExtractionSubscription) {
         return;
       }
-
-      const colours = function* () {
-        const circularColours = [
-          'black',
-          'red',
-          'green',
-          'purple',
-          'orange'
-        ];
-        let index = 0;
-        const nColours = circularColours.length;
-        while (true) {
-          yield circularColours[index = ++index % nColours];
-        }
-      }();
-
+      
       this.featureExtractionSubscription =
         this.piperService.featuresExtracted$.subscribe(
           features => {
@@ -251,7 +253,8 @@
       });
       this.addLayer(timeAxis, waveTrack, this.timeline.timeContext, true);
       this.cursorLayer = new wavesUI.helpers.CursorLayer({
-        height: height
+        height: height,
+        color: '#c33c54'
       });
       this.addLayer(this.cursorLayer, waveTrack, this.timeline.timeContext);
     }
@@ -557,14 +560,15 @@
       const waveformLayer = new wavesUI.helpers.WaveformLayer(buffer, {
         top: (height - totalWaveHeight) / 2 + waveHeight * ch,
         height: waveHeight,
-        color: 'darkblue',
+        color: '#0868ac',
         channel: ch
       });
       this.addLayer(waveformLayer, waveTrack, this.timeline.timeContext);
     }
 
     this.cursorLayer = new wavesUI.helpers.CursorLayer({
-      height: height
+      height: height,
+      color: '#c33c54'
     });
     this.addLayer(this.cursorLayer, waveTrack, this.timeline.timeContext);
     this.timeline.state = new wavesUI.states.CenteredZoomState(this.timeline);
@@ -622,23 +626,22 @@
         if (featureData.length === 0) {
           return;
         }
-        const normalisationFactor = 1.0 /
-          featureData.reduce(
-            (currentMax, feature) => Math.max(currentMax, feature),
-            -Infinity
-          );
-
         const plotData = [...featureData].map((feature, i) => {
           return {
             cx: i * stepDuration,
-            cy: feature * normalisationFactor,
-            value: feature
+            cy: feature
           };
         });
-
+        let min = featureData.reduce((m, f) => Math.min(m, f), Infinity);
+        let max = featureData.reduce((m, f) => Math.max(m, f), -Infinity);
+        if (min === Infinity) {
+          min = 0;
+          max = 1;
+        }
         const lineLayer = new wavesUI.helpers.LineLayer(plotData, {
           color: colour,
-          height: height
+          height: height,
+          yDomain: [ min, max ]
         });
         this.addLayer(
           lineLayer,
@@ -646,9 +649,10 @@
           this.timeline.timeContext
         );
         this.highlightLayer = new wavesUI.helpers.HighlightLayer(lineLayer, {
-          color: colour,
           opacity: 0.7,
-          height: height
+          height: height,
+          color: '#c33c54',
+          yDomain: [ min, max ]
         });
         this.addLayer(
           this.highlightLayer,

--- a/src/styles.css	Fri Apr 28 14:20:43 2017 +0100
+++ b/src/styles.css	Fri Apr 28 14:31:24 2017 +0100
@@ -48,3 +48,11 @@
 html {
   height: 100%;
 }
+
+/* Small change to this colour to fit better with colours we use in
+   visualisations */
+
+.mat-toolbar, .mat-toolbar.mat-primary {
+  background: #0868ac;
+}
+