source: gs3-extensions/web-audio/trunk/js-dsp/frequency-plotter.js@ 28548

var FrequencyPlotter = function(audio, canvas, label_canvas,activeWorkflow, colorMappingMode, totalNumFrames) {

    this.canvas = canvas;
    this.label_canvas = label_canvas;
    this.chromaTransform = activeWorkflow.chromaCpt;;
    this.colorMappingMode = colorMappingMode;

    this.totalNumFrames = totalNumFrames; 

    this.width = canvas.width;
    this.height = canvas.height;

    this.fudgeWidth = this.width - (FrequencyPlotter.fudgeOffset + FrequencyPlotter.fudgeTrim);

    //console.debug("frequency-plotter constructor(): Canvas w x h: [" + this.width +","+ this.height + "]");

    this.duration = audio.duration;

    this.dataMapping = { "freqSpectrum":      activeWorkflow.freqSpectrumCpt.fft.spectrum,
             "freqPowerSpectrum": activeWorkflow.freqSpectrumCpt.fft.powerSpectrum,
             "filterBank":        activeWorkflow.filterBankCpt.filterBankSequence,
             "chromaFeatures":    activeWorkflow.chromaCpt.chromaFeaturesSequence };

    this.plotMapping = { "freqSpectrum":      plotFrequencySpectrumLabels,
             "freqPowerSpectrum": plotFrequencyPowerSpectrumLabels,
             "filterBank":        plotFilterBankLabels,
             "chromaFeatures":    plotChromaFeaturesLabels };


    this.cptMapping = { "freqSpectrum":      activeWorkflow.freqSpectrumCpt,
            "freqPowerSpectrum": activeWorkflow.freqSpectrumCpt,
            "filterBank":        activeWorkflow.filterBankCpt,
            "chromaFeatures":    activeWorkflow.chromaCpt };

    this.ctx = canvas.getContext('2d');
    this.label_ctx = label_canvas.getContext('2d');
    this.canvas_saved_img = null;

    var image_server_url = "http://localhost:8181/greenstone3/cgi-bin/image-server.pl?a=load&c="+gs.cgiParams.c
    +"&d="+gs.cgiParams.d+"&site="+gs.xsltParams.site_name;
    var canvas_load_data = { a: "load", 
                 d: gs.cgiParams.d, 
                 c: gs.cgiParams.c, 
                 site: gs.xsltParams.site_name };

    var outerThis = this;
    var jqxhr = $.ajax(image_server_url)
    .done(function(imagedata) {
        var check_prefix = imagedata.toString().substring(0, 5);
        if (check_prefix == "data:") {
        console.log("Loaded in previously stored self-similarity map");
        outerThis.canvas_saved_img = document.createElement("img");
        outerThis.canvas_saved_img.src = imagedata;
        }
    })
    .fail(function() {
        console.log("No currently stored self-similarity map for this document");
    });


    this.plotMapping[activeWorkflow.chromaCpt.transformMode](this);

    this.prevXLine = null;
    this.prevXLineMaxArray = null;
    this.plottedDataBuffer = new Array();

    this.printedOutOfDataWarning = false;

};


FrequencyPlotter.prototype.reset = function() {
    this.chromaTransform.reset();
    this.prevXLine = null;
    this.prevXLineMaxArray = null;
    this.plottedDataBuffer = new Array();
}


FrequencyPlotter.prototype.plotDataLine = function(eventTime,data) {

    var lineX = FrequencyPlotter.fudgeOffset + Math.round((eventTime/this.duration) *  this.fudgeWidth);

    var box_width = 1;
    var box_height = Math.round(this.height/data.length);

    var gapX = 0;

    if (this.prevXLine!=null) { 
    gapX = lineX - this.prevXLine;

    if (gapX==0) {
        // layer max values on top of prevXLineMaxArray
        for (var i=0; i<data.length; i++) {
        this.prevXLineMaxArray[i] = Math.max(this.prevXLineMaxArray[i],data[i]);
        }
    }
    else {
        // on to a new column => lay in the values in 'data'
        this.plottedDataBuffer[lineX-1] = new Float32Array(this.prevXLineMaxArray);

        for (var i=0; i<data.length; i++) {
        this.prevXLineMaxArray[i] = data[i];
        }
    }

    if (gapX>0) {
//      box_width = gapX+1;
        box_width = gapX;
    }
    }
    else {
    this.prevXLineMaxArray = new Float32Array(data.length);
    for (var i=0; i<data.length; i++) {
        this.prevXLineMaxArray[i] = data[i];
    }
    }
        
    var transformMode = this.chromaTransform.transformMode;
    var maxVal = this.cptMapping[transformMode].getMaxVal();

    var $displayElem = $("#"+this.chromaTransform.getTransformMode()+"Max");
    if ($displayElem.length>0) {
    $displayElem.html(maxVal.toPrecision(4).substring(0,5));
    }

    for (var i=0; i<this.prevXLineMaxArray.length; i++) {

    //var cv_perc = 100 * data[i] / maxVal;
    var cv_perc = 100 * this.prevXLineMaxArray[i] / maxVal;

    if (cv_perc>100) {
        console.log("Percent exceeds 100%: cv_perc[ = " + i + "] = " + cv_perc + " => Capping to 100%");
        cv_perc = 100;
    }

    var plot_color;
    if (this.colorMappingMode == "rgb") {
        var rr = Math.floor(255 * (cv_perc / 100));
        plot_color = "rgb("+ rr +",0,0)";
    }
    else {
        var hue = Math.floor(240 * ((100.0-cv_perc) / 100));
        plot_color = "hsl("+ hue +",100%,50%)";
    }

    this.ctx.fillStyle=plot_color;  
    // //this.ctx.fillRect(lineX-gapX,i*box_height+1,box_width,box_height-1);
    //this.ctx.fillRect(lineX,i*box_height+1,box_width,box_height-1);
    this.ctx.fillRect(this.prevXLine,i*box_height+1,box_width,box_height-1);

    //this.ctx.fillRect(0,0,200,400);

/*
    //var plot_color2 = "rgb(0,"+ i*20 +",0)";
    var plot_color2 = "hsl(358,100%,50%)";
    this.ctx.fillStyle=plot_color2;
    this.ctx.fillRect(lineX-gapX,i*box_height+1,box_width,box_height-1);
*/

    }

/*
    if (gapX > 0) {
    // on to a new column => lay in the values in 'data'
    for (var i=0; i<data.length; i++) {
        this.prevXLineMaxArray[i] = data[i];
    }
    }
*/

    //console.log("*** setting prevXLine = " + lineX);

    this.prevXLine = lineX;
    this.plottedDataBuffer[lineX] = new Float32Array(this.prevXLineMaxArray);

};


var _fpChangingMode = false;

FrequencyPlotter.prototype.plotVisualLine  = function(needsRefresh,eventTime) {


    if (_fpChangingMode) {
    return;
    }

    if (needsRefresh) {
    // Clear the canvas before drawing line

    this.ctx.clearRect(FrequencyPlotter.fudgeOffset,0, this.width, this.fudgeHeight);
    this.label_ctx.clearRect(FrequencyPlotter.fudgeOffset,0, this.width, this.fudgeHeight);
    }

    
    //var dataPos = Math.round((eventTime * this.sampleRate)/(this.frameBufferLength*this.concatLimit));

    var dataPos = Math.round((eventTime / this.duration) * this.totalNumFrames);

    var dataSequence = this.dataMapping[this.chromaTransform.transformMode];

    if (dataPos<dataSequence.length) {
    var data = dataSequence[dataPos];

    this.plotDataLine(eventTime,data);
    }
    else {
    if (!this.printedOutOfDataWarning) {
        console.error("FrequencyPlotter::plotVisualLine(): No data to play for event time: " + eventTime + "\n"
              + "(Supressing subsequent error messages of this type)");
        this.printedOutOfDataWarning = true;
    }

    }

};

FrequencyPlotter.prototype.replotVisual  = function() {

    //console.log("**** FrequencyPlotter.replotVisual()");

    var transformMode = this.chromaTransform.transformMode;
    var maxVal = this.cptMapping[transformMode].getMaxVal();

    var prevX = -1;
    var box_width = 0;

    for (var x=0; x<this.plottedDataBuffer.length; x++) {
    var data = this.plottedDataBuffer[x];
    
    if (data != null) {

        box_width = x - prevX;

        var box_height = Math.round(this.height/data.length);

        for (var i=0; i<data.length; i++) {

        var cv_perc = 100 * data[i] / maxVal;

        var plot_color;
        if (this.colorMappingMode == "rgb") {
            var rr = Math.floor(255 * (cv_perc / 100));
            plot_color = "rgb("+ rr +",0,0)";
        }
        else {
            var hue = Math.floor(240 * ((100.0-cv_perc) / 100));
            plot_color = "hsl("+ hue +",100%,50%)";
        }

        this.ctx.fillStyle=plot_color;  
        this.ctx.fillRect(x,i*box_height+1,box_width,box_height-1);
        }

        prevX = x;
    }
    }
}


FrequencyPlotter.prototype.hasStoredSelfSimilarityMatrix  = function() {
    return this.canvas_saved_img != null;
}

FrequencyPlotter.prototype.plotStoredSelfSimilarityMatrix  = function() {

    this.ctx.drawImage(this.canvas_saved_img,0,0);
    //var img_data    = canvas.toDataURL("image/png");
}


FrequencyPlotter.prototype.plotSelfSimilarityMatrix  = function(ssm,pausePerc) {


    var num_frames = ssm.length;

    console.log("plotSelfSimilarityMatrex: num_frames = " + num_frames + ", pausePerc = " + pausePerc);
    var activeWidth  = this.fudgeWidth * pausePerc;
    var activeHeight = this.height * pausePerc;

    var x_scale = activeWidth / num_frames;
    var y_scale = activeHeight / num_frames;
    var x_width  = Math.ceil(x_scale);
    var y_height = Math.ceil(y_scale);

    console.log("SelfSimilarityMatrix: x scale = " + x_scale);
    console.log("SelfSimilarityMatrix: y scale = " + y_scale);

    //console.log("box width = " + x_width);
    //console.log("box hieght = " + y_height);

    this.label_ctx.clearRect(0,0, this.width, this.height);

    this.progress = 0;
    var total_calcs = num_frames * num_frames;
    var c=0;
    var y=0;
    
    (function(outerThis) {
    // for (var y=0; y<num_frames; y++) {

    for (var x=0; x<num_frames; x++) {

        outerThis.progress = Math.round((100.0*c)/total_calcs);

        var v = ssm[y][x];
        var hue = Math.floor(240 * (1.0 - v));
        var plot_color = "hsl("+ hue +",100%,50%)";

        outerThis.ctx.fillStyle=plot_color; 
        outerThis.ctx.fillRect(FrequencyPlotter.fudgeOffset + (x*x_scale),y*y_scale,x_width,y_height);

        c++;
    }

    y++;

    if (y<num_frames) {
        setTimeout(arguments.callee,0,outerThis);
    }    
    else {
        outerThis.progress = 100;

        if ((jsMadProcessing == null) ||
        ((jsMadProcessing != null) && jsMadProcessing.processingFinished())) {

        var canvas = document.getElementById("freq-plot" );
        var img_data    = canvas.toDataURL("image/png");

        outerThis.canvas_saved_img = document.createElement("img");
        outerThis.canvas_saved_img.src = img_data;


        var image_server_url = "http://localhost:8181/greenstone3/cgi-bin/image-server.pl";

        var canvas_save_data = { a: "save", 
                     d: gs.cgiParams.d, 
                     c: gs.cgiParams.c, 
                     site: gs.xsltParams.site_name, 
                     imagedata: img_data };

        $.post(image_server_url, canvas_save_data).done(function( data ) {
            console.log( "Image data saved " );
        });
/*
        $.ajax({
            type: "POST",
            url: url,
            data: { "a" : "save" }
            success: success,
            dataType: dataType
        });
*/

        console.log("Done save");

        }   
    }
    })(this);

};

var plotFrequencySpectrumLabels = function(fp) {
};

var plotFrequencyPowerSpectrumLabels = function(fp) {
};

var plotFilterBankLabels = function(fp) {

    var transformMode = fp.chromaTransform.transformMode;
    var numSteps = fp.cptMapping[transformMode].filterBankOut.length;

    var stepY = Math.round(fp.height/numSteps);

    var startX;
    if (fp.prevXLine==null) {
    startX=0;
    }
    else {
    startX = fp.prevXLine+1;
    }

    //console.log("*** Filter bank start x = " + startX);

    for (var i=0; i<numSteps; i++) {

    fp.label_ctx.beginPath();
    fp.label_ctx.moveTo(startX, i*stepY);
    fp.label_ctx.lineTo(fp.width, i*stepY);
    fp.label_ctx.strokeStyle = "white";
    fp.label_ctx.stroke();
    fp.label_ctx.closePath();
    }

    fp.label_ctx.fillStyle = "black";
    fp.label_ctx.font = "bold 14px Arial";
    fp.label_ctx.textBaseline = "top";

    var x = FrequencyPlotter.fudgeOffset + fp.fudgeWidth + 5;
    if (FrequencyPlotter.fudgeTrim==0) {
    // A fudge on top of a fudge!
    x -= 60;
    }

    var y = 1;
    var loEdge = fp.chromaTransform.loEdge;

    fp.label_ctx.fillText(loEdge.toPrecision(3) + " Hz", x,y);

};

var plotChromaFeaturesLabels = function(fp) {

    var labels = ['C','C#/Db','D','D#/Eb','E','F','F#/Gb','G','G#/Ab','A','A#/Bb','B'];

    fp.label_ctx.fillStyle = "black";
    fp.label_ctx.font = "bold 14px Arial";
    fp.label_ctx.textBaseline = "top";


    // fp.ctx.lineWidth   = 1;

    var x = FrequencyPlotter.fudgeOffset + fp.fudgeWidth + 5;
    if (FrequencyPlotter.fudgeTrim==0) {
    // A fudge on top of a fudge!
    x -= 50;
    }

    var stepY = fp.height/labels.length;

    var startX;
    if (fp.prevXLine==null) {
    startX=0;
    }
    else {
    startX = fp.prevXLine+1;
    }

    //console.log("*** Chromagram start x = " + startX);

    for (var i=0; i<labels.length; i++) {

    var y = 12 + i * stepY;

    fp.label_ctx.fillText(labels[i], x,y);

    fp.label_ctx.beginPath();
    fp.label_ctx.moveTo(startX, i*stepY);
    fp.label_ctx.lineTo(fp.width, i*stepY);
    fp.label_ctx.strokeStyle = "white";
    fp.label_ctx.stroke();
    fp.label_ctx.closePath();
    }

};

FrequencyPlotter.prototype.setTransformMode = function(transformMode) {

    _fpChangingMode = true;

    this.chromaTransform.setTransformMode(transformMode);

    var startX;
    if (this.prevXLine==null) {
    startX=0;
    }
    else {
    startX = this.prevXLine+1;
    }

    //this.ctx.clearRect(startX,0, this.width-startX, this.height);
    this.label_ctx.clearRect(startX,0, this.width-startX, this.height);

    this.plotMapping[transformMode](this);

    _fpChangingMode = false;

};


FrequencyPlotter.prototype.setColorMappingMode  = function(colorMappingMode) {
    this.colorMappingMode = colorMappingMode;
}

// Guestimate for Firefox audio element
//FrequencyPlotter.fudgeOffset = 28;
//FrequencyPlotter.fudgeTrim   = 58;

// SoundManager2 settings
FrequencyPlotter.fudgeOffset = 0;
FrequencyPlotter.fudgeTrim   = 0;