Add more configuration options to the overview waveform, make it possible to turn on or off the axes

README.md

@@ -185,6 +185,12 @@ var options = {
  // Colour for the overview waveform rectangle that shows what the zoom view shows
  overviewHighlightRectangleColor: 'grey',
 
+ // Vertical padding in pixel to add to the overview waveform highlight rectangle. Defaults to 11px
+ overviewHighlightRectanglePadding: 11,
+
+ // Opacity of the overview waveform highlight rectangle. Defaults to 0.3
+ overviewHighlightRectangleOpacity: 0.3,
+
  // Colour for segments on the waveform
  segmentColor: 'rgba(255, 161, 39, 1)',
 
@@ -203,6 +209,15 @@ var options = {
  // Colour of the axis labels
  axisLabelColor: '#aaa',
 
+ // Use an axis on the following waveforms: 'overview', 'zoomview'
+ axisOnWaveforms: ['overview', 'zoomview'],
+
+ // Color for the axis labels in the overview waveform
+ overviewAxisLabelColor: '#aaa',
+
+ // Color for the axis gridlines in the overview waveform
+ overviewAxisGridlineColor: '#ccc',
+
  // Random colour per segment (overrides segmentColor)
  randomizeSegmentColor: true,
 

src/main.js

@@ -94,6 +94,17 @@ define('peaks', [
  * Colour for the overview waveform
  */
  overviewWaveformColor: 'rgba(0,0,0,0.2)',
+
+ /**
+ * Vertical padding in pixel to add to the overview waveform highlight rectangle. Defaults to 11px
+ */
+ overviewHighlightRectanglePadding: 11,
+
+ /**
+ * Opacity of the overview waveform highlight rectangle. Defaults to 0.3
+ */
+ overviewHighlightRectangleOpacity: 0.3,
+
  /**
  * Colour for the overview waveform highlight rectangle, which shows
  * you what you see in the zoom view.
@@ -127,6 +138,20 @@ define('peaks', [
  * Colour of the axis labels
  */
  axisLabelColor: '#aaa',
+
+ /**
+ * Define the waveforms where an axis will be drawn. Valid options are 'overview' and 'zoomview'
+ */
+ axisOnWaveforms: ['overview', 'zoomview'],
+ /**
+ * Color for the axis labels in the overview waveform
+ */
+ overviewAxisLabelColor: '#aaa',
+ /**
+ * Color for the axis gridlines in the overview waveform
+ */
+ overviewAxisGridlineColor: '#ccc',
+
  /**
  *
  */

src/main/views/waveform.overview.js

@@ -125,15 +125,20 @@ define([
  strokeWidth: 0
  });*/
 
+ var refPadding = this.options.overviewHighlightRectanglePadding;
+ if (refPadding * 2 > this.height) {
+ refPadding = 0;
+ }
+
  this.refWaveformRect = new Konva.Rect({
  x: 0,
- y: 11,
+ y: refPadding,
  width: 0,
  stroke: that.options.overviewHighlightRectangleColor,
  strokeWidth: 1,
- height: this.height - (11*2),
- fill: that.options.overviewHighlightRectangleColor,
- opacity: 0.3,
+ height: this.height - (refPadding * 2),
+ fill: this.options.overviewHighlightRectangleColor,
+ opacity: this.options.overviewHighlightRectangleOpacity,
  cornerRadius: 2
  });
 
@@ -152,7 +157,10 @@ define([
  });
 
  that.uiLayer = new Konva.Layer({ index: 100 });
- that.axis = new WaveformAxis(that);
+
+ if (that.peaks.options.axisOnWaveforms.indexOf('overview') > -1) {
+ that.axis = new WaveformAxis(that, { axisGridlineColor: that.peaks.options.overviewAxisGridlineColor, axisLabelColor: that.peaks.options.overviewAxisLabelColor });
+ }
 
  this.uiLayer.add(this.playheadLine);
  this.stage.add(this.uiLayer);

src/main/views/waveform.zoomview.js

@@ -57,7 +57,9 @@ define([
 
  that.zoomWaveformLayer.add(that.background);
 
- that.axis = new WaveformAxis(that);
+ if (that.peaks.options.axisOnWaveforms.indexOf('zoomview') > -1) {
+ that.axis = new WaveformAxis(that, { axisGridlineColor: that.peaks.options.axisGridlineColor, axisLabelColor: that.peaks.options.axisLabelColor });
+ }
 
  that.createZoomWaveform();
  that.createUi();

src/main/waveform/waveform.axis.js

@@ -26,16 +26,19 @@ define(["peaks/waveform/waveform.mixins", "konva"], function (mixins, Konva) {
  }
  }
 
- function WaveformAxis(view) {
+ function WaveformAxis(view, viewOptions) {
  this.view = view; // store reference to waveform view object
+ if (viewOptions === undefined || viewOptions === null) {
+ viewOptions = {};
+ }
 
  this.axisShape = new Konva.Shape({
  fill: 'rgba(38, 255, 161, 1)',
  strokeWidth: 0,
  opacity: 1
  });
 
- this.axisShape.sceneFunc(this.axisDrawFunction.bind(this, view));
+ this.axisShape.sceneFunc(this.axisDrawFunction.bind(this, view, viewOptions));
 
  this.view.uiLayer.add(this.axisShape);
  }
@@ -74,11 +77,13 @@ define(["peaks/waveform/waveform.mixins", "konva"], function (mixins, Konva) {
 
 
  /**
- *
  * @param {WaveformOverview|WaveformZoomview} view
+ * @param {Object} [viewOptions] configuration options
+ * @param {String} [viewOptions.axisGridlineColor] color code to use for the grid lines
+ * @param {String} [viewOptions.axisLabelColor] color code to use for labels
  * @param {Konva.Context} context
  */
- WaveformAxis.prototype.axisDrawFunction = function (view, context) {
+ WaveformAxis.prototype.axisDrawFunction = function (view, viewOptions, context) {
  var currentFrameStartTime = view.data.time(view.frameOffset);
 
  // Draw axis markers
@@ -95,13 +100,15 @@ define(["peaks/waveform/waveform.mixins", "konva"], function (mixins, Konva) {
 
  // Distance between waveform start time and first axis marker (pixels)
  var axisLabelOffsetPixels = this.view.data.at_time(axisLabelOffsetSecs);
+ var axisGridlineColor = viewOptions.axisGridlineColor || this.view.options.axisGridlineColor;
+ var axisLabelColor = viewOptions.axisLabelColor || this.view.options.axisLabelColor;
 
- context.setAttr('strokeStyle', this.view.options.axisGridlineColor);
+ context.setAttr('strokeStyle', axisGridlineColor);
  context.setAttr('lineWidth', 1);
 
  // Set text style
  context.setAttr('font', "11px sans-serif");
- context.setAttr('fillStyle', this.view.options.axisLabelColor);
+ context.setAttr('fillStyle', axisLabelColor);
  context.setAttr('textAlign', "left");
  context.setAttr('textBaseline', "bottom");