tools/eye_diagram/eye_diagram.html

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>Eye Diagram</title>
    <style>
        html, body {
            width: 100%;
            height: 100%;
            margin: 0px;
            border: 0;
            overflow: hidden; /*    Disable scrollbars */
            display: block;    /* No floating content on sides */
        }

        .eyeCanvas {
            border:1px solid #111111;
            width: calc(100% - 20px);
            margin-left: 10px;
            margin-right: 10px;
        }

        .waveCanvas {
            border:1px solid #111111;
            width: calc(100% - 20px);
            height:200px;
            margin-left: 10px;
            margin-right: 10px;
        }

        .input_value {
            width: 100px;
            margin-left: 10px;
            margin-right: 10px;
            text-align: right;
        }

        .slider {
            width: calc(100% - 270px);
            position: relative;
            top: 7px;
        }
    </style>
</head>

<body onload="onPageLoad();">

    <div style="margin: 10px;">
        <input type="file" id="myFileInput" />
    </div>

    <div>
    <canvas id="waveCanvas" class="waveCanvas">
    Your browser does not support the HTML5 canvas tag.</canvas>
    </div>

    <div style="margin:10px">
        <span style="display: inline">
            <span>Samples:</span>
            <span id="samplesCount" style="width:100px;display:inline-block;"></span>
            <span>from sample</span>
            <input type="text" id="fromSample" style="width:100px"></span>
            <span>to</span>
            <input type="text" id="toSample" style="width:100px"></span>
            <span style="margin-left:50px">gain</span>
            <input type="text" id="gain" style="width:100px"></span>
        </span>
    </div>

    <div>
    <canvas id="zoomCanvas" class="eyeCanvas">
    Your browser does not support the HTML5 canvas tag.</canvas>
    </div>

    <div>
    <canvas id="eyeCanvas" class="eyeCanvas">
    Your browser does not support the HTML5 canvas tag.</canvas>
    </div>

    <div>
    <span style="display: inline;">
        <input type="text" class="input_value" id="mySPSRangeValue" title="Samples per symbol" />
        <input type="range" min="1" max="10" step="0.001" class="slider" id="mySPSRangeSlider" />
        <span class="input_value"/>
     </span>
     </div>

     <div>
    <span style="display: inline;">
        <input type="text" class="input_value" id="myOffsetValue" title="Offset" />
        <input type="range" min="-5" max="5" step="0.001" class="slider" id="myOffsetSlider" />
        <span class="input_value"/>
     </span>
     </div>

<script>

var waveCanvas;
var zoomCanvas;
var eyeCanvas;

var data;
var sps = 9.873333333;
var offset = 0;
var fromSample;
var toSample;

var onLeftBorder = false;
var draggingLeftBorder = false;
var draggingRightBorder = false;

var BORDER_COLOR = 'rgba(192, 192, 192, 0.5)';
var BIT_COLOR = 'rgba(255, 255, 192, 0.5)';

var fromSampleControl;
var toSampleControl;
var phaseGainControl;

var phaseGain = 1.0;

function fromSampleMouseWheelHandler(evt)
{
    var val = parseInt(fromSampleControl.value) + Math.sign(evt.wheelDelta);
    if (val >= 0 && val <= toSample) {
        fromSample = val;
        fromSampleControl.value = val;
        redrawAll();
    }
}

function toSampleMouseWheelHandler(evt)
{
    var val = parseInt(toSampleControl.value) + Math.sign(evt.wheelDelta);
    if (val >= fromSample && val <= data.length) {
        toSample = val;
        toSampleControl.value = val;
        redrawAll();
    }
}

function onPageLoad()
{
    // Check for the various File API support.
    if (window.File && window.FileReader && window.FileList && window.Blob) {
        // Great success! All the File APIs are supported.
    } else {
        alert('The File APIs are not fully supported in this browser.');
    }

    document.getElementById('myFileInput').addEventListener('change', readFile, false);

    var mySPSRangeValue = document.getElementById('mySPSRangeValue');
    var mySPSRangeSlider = document.getElementById('mySPSRangeSlider');
    var myOffsetValue = document.getElementById('myOffsetValue');
    var myOffsetSlider = document.getElementById('myOffsetSlider');

    mySPSRangeValue.value = sps;
    mySPSRangeSlider.value = sps;
    myOffsetValue.value = 0;
    myOffsetSlider.value = 0;
    myOffsetSlider.min = -sps / 2.0;
    myOffsetSlider.max = sps / 2.0;

    mySPSRangeValue.oninput = function() {
        if (this.value > 0) {
            sps = this.value;
            mySPSRangeSlider.value = this.value;
            myOffsetSlider.max = sps / 2.0;
            myOffsetSlider.min = -myOffsetSlider.max;
            redrawEye();
            redrawZoom();
        }
    }

    mySPSRangeSlider.oninput = function() {
        sps = this.value;
        mySPSRangeValue.value = this.value;
        myOffsetSlider.max = sps / 2.0;
        myOffsetSlider.min = -myOffsetSlider.max;
        // Seems like this is needed to avoid some weird movement on this slider...
        myOffsetSlider.value = myOffsetValue.value;
        redrawEye();
        redrawZoom();
    }

    myOffsetValue.oninput = function() {
        offset = this.value;
        myOffsetSlider.value = this.value;
        redrawEye();
        redrawZoom();
    }

    myOffsetSlider.oninput = function() {
        offset = this.value;
        myOffsetValue.value = this.value;
        redrawEye();
        redrawZoom();
    }

    fromSampleControl = document.getElementById('fromSample');
    fromSampleControl.oninput = function() {
        fromSample = parseInt(fromSampleControl.value);
        redrawAll();
    }
    fromSampleControl.addEventListener("mousewheel", fromSampleMouseWheelHandler);

    toSampleControl = document.getElementById('toSample');
    toSampleControl.oninput = function() {
        toSample = parseInt(toSampleControl.value);
        redrawAll();
    }
    toSampleControl.addEventListener("mousewheel", toSampleMouseWheelHandler);

    phaseGainControl = document.getElementById('gain');
    phaseGainControl.value = phaseGain;
    phaseGainControl.oninput = function() {
        phaseGain = parseFloat(phaseGainControl.value);
        visualizeEye(eyeCanvas, data, sps, offset, fromSample, toSample, phaseGain);
        visualizeZoom(zoomCanvas, data, sps, offset, fromSample, toSample, phaseGain);
    }

    eyeCanvas = document.getElementById('eyeCanvas');
    waveCanvas = document.getElementById('waveCanvas');
    zoomCanvas = document.getElementById('zoomCanvas');

    waveCanvas.addEventListener("mousemove", function(evt) {

        if (!data || data.length == 0) {
            return;
        }

        var rect = waveCanvas.getBoundingClientRect();
        var x = evt.clientX - rect.left;
        var h = waveCanvas.height;
        var scale_x = (rect.right - rect.left) / data.length;

          if (draggingLeftBorder) {
              fromSample = Math.round(x / scale_x);
              if (fromSample < 0) {
                  fromSample = 0;
              }
              if (fromSample > toSample) {
                  fromSample = toSample;
              }
            redrawWave();
            redrawZoom();
            fromSampleControl.value = fromSample;
          } else if (draggingRightBorder) {
              toSample = Math.round(x / scale_x);
              if (toSample < fromSample) {
                  toSample = fromSample;
              }
              if (toSample > data.length) {
                  toSample = data.length;
              }
            redrawWave();
            redrawZoom();
            toSampleControl.value = toSample;
          } else {
              // Not dragging
              var w1 = fromSample * scale_x;
              var w2 = toSample * scale_x;

              onLeftBorder = false;
              onRightBorder = false;
              if (Math.abs(x-w1) < 8) {
                  onLeftBorder = true;
              }
              if (Math.abs(x-w2) < 8) {
                  onRightBorder = true;
              }

              if (onLeftBorder || onRightBorder) {
                  if (waveCanvas.style.cursor != 'col-resize') {
                      waveCanvas.style.cursor='col-resize';
                  }
              } else {
                  if (waveCanvas.style.cursor != 'default') {
                      waveCanvas.style.cursor='default';
                  }
              }
        }
    });

      waveCanvas.addEventListener("mousedown", function(evt) {
          if (onLeftBorder) {
              draggingLeftBorder = true;
          }
          if (onRightBorder) {
              draggingRightBorder = true;
          }
      });

      waveCanvas.addEventListener("mouseup", function(evt) {
          draggingLeftBorder = false;
        draggingRightBorder = false;
        redrawEye();
      });

      /*waveCanvas.addEventListener("mouseout", function(evt) {
          draggingLeftBorder = false;
        draggingRightBorder = false;
      });*/

      waveCanvas.addEventListener("mouseenter", function(evt) {
          if (evt.buttons == 0) {
              draggingLeftBorder = false;
            draggingRightBorder = false;
        }
      });

    window.addEventListener('resize', resizeCanvas, false);
    // Draw canvas border for the first time.
    resizeCanvas();
}

// Display custom canvas.
// In this case it's a blue, 5 pixel border that
// resizes along with the browser window.
function redrawAll()
{
    visualizeEye(eyeCanvas, data, sps, offset, fromSample, toSample, phaseGain);
    visualizeWave(waveCanvas, data, offset, fromSample, toSample);
    visualizeZoom(zoomCanvas, data, sps, offset, fromSample, toSample, phaseGain);
}

function redrawEye()
{
    visualizeEye(eyeCanvas, data, sps, offset, fromSample, toSample, phaseGain);
}

function redrawWave()
{
    visualizeWave(waveCanvas, data, offset, fromSample, toSample);
}

function redrawZoom()
{
    visualizeZoom(zoomCanvas, data, sps, offset, fromSample, toSample, phaseGain);
}

// Runs each time the DOM window resize event fires.
// Resets the canvas dimensions to match window,
// then draws the new borders accordingly.
function resizeCanvas()
{
    waveCanvas.width = document.body.clientWidth;
    waveCanvas.height = 200;
    zoomCanvas.width = document.body.clientWidth;
    zoomCanvas.height = 200;
    eyeCanvas.width = document.body.clientWidth;
    eyeCanvas.height = document.body.clientHeight - 140 - 140 - 290;

    redrawAll();
}

function readFile(e) {
    var file = e.target.files[0];
    if (!file) {
        return;
    }
    var reader = new FileReader();
    reader.onload = function(e) {
        var contents = e.target.result;
        //var element = document.getElementById('file-content');
        bytes = Uint8Array.from(contents, c => c.charCodeAt(0));
        data = new Float32Array(bytes.buffer)
        document.getElementById('samplesCount').innerHTML = data.length;
        fromSample = 0;
        toSample = data.length;
        document.getElementById('fromSample').value = fromSample;
        document.getElementById('toSample').value = toSample;
        redrawAll();
    };
    reader.readAsBinaryString(file);
}

function visualizeWave(canvas, floats, offset, fromSample, toSample)
{
    var ctx = canvas.getContext("2d");
    var w = canvas.width;
    var h = canvas.height;

    ctx.clearRect(0, 0, w, h);

    // Grid
    ctx.strokeStyle = 'grey';
    ctx.lineWidth = 1;
    ctx.beginPath();
    ctx.moveTo(0, h/2);
    ctx.lineTo(w, h/2);
    ctx.stroke();

    if (!floats || floats.length == 0) {
        return;
    }

    var x_step = w / floats.length;

    ctx.fillStyle=BORDER_COLOR;

    var w1 = fromSample*x_step;
    if (w1 > 0.0) {
        ctx.fillRect(0,0,w1,h);
    }
    var w2 = toSample*x_step;
    if (w2 != w) {
        ctx.fillRect(w2,0,w,h);
    }

    ctx.strokeStyle = 'rgba(0, 0, 100, 1.0)';
    ctx.lineWidth = '1';

    var gain = 1.0;
    var y_scale = h*gain/(2.0*Math.PI);

    ctx.beginPath();
    var x = 0;
    var y = (h/2.0)-(floats[0]*y_scale);
    ctx.moveTo(x, y);

    for (var sample_index=1; sample_index < floats.length; sample_index++) {
        x += x_step;
        y = (h/2.0)-(floats[sample_index]*y_scale);
        ctx.lineTo(x, y);
    }

    ctx.stroke();
}

function visualizeZoom(canvas, floats, sps, offset, fromSample, toSample, phaseGain)
{
    var ctx = canvas.getContext("2d");
    var w = canvas.width;
    var h = canvas.height;

    ctx.clearRect(0, 0, w, h);

    if (!floats || floats.length == 0) {
        return;
    }
    var nsamples = (toSample - fromSample);
    if (nsamples == 0) {
        return;
    }

    var x_step = w / nsamples;


    // Sampling grid
    var x;

    ctx.fillStyle=BIT_COLOR;
    var bw = x_step * sps;
    x = (offset) * x_step;
    while (x < w) {
        ctx.fillRect(x,0,bw,h);
        x += bw*2;
    }

    // Grid
    ctx.strokeStyle = 'grey';
    ctx.lineWidth = 1;
    ctx.beginPath();
    ctx.moveTo(0, h/2);
    ctx.lineTo(w, h/2);
    ctx.stroke();

    x = (offset - sps/2) * x_step;
    while (x < w) {
        ctx.beginPath();
        ctx.moveTo(x, 0);
        ctx.lineTo(x, h);
        ctx.stroke();
        x += x_step * sps;
    }

    ctx.strokeStyle = 'rgba(0, 0, 100, 1.0)';
    ctx.lineWidth = '1';

    var y_scale = h*phaseGain/(2.0*Math.PI);

    ctx.beginPath();
    x = 0;
    var y = (h/2.0)-(floats[fromSample]*y_scale);
    ctx.moveTo(x, y);

    for (var sample_index=fromSample+1; sample_index < toSample; sample_index++) {
        x += x_step;
        y = (h/2.0)-(floats[sample_index]*y_scale);
        ctx.lineTo(x, y);
    }
    ctx.stroke();

    ctx.fillStyle='rgba(0, 0, 100, 1.0)';
    x = 0;
    for (var sample_index=fromSample; sample_index < toSample; sample_index++) {
        y = (h/2.0)-(floats[sample_index]*y_scale);
        ctx.beginPath();
        ctx.arc(x, y, 2, 0, 2 * Math.PI);
        ctx.fill();
        x += x_step;
    }


    ctx.stroke();
}

function visualizeEye(canvas, floats, sps, offset, fromSample, toSample, phaseGain)
{
    var ctx = canvas.getContext("2d");

    var w = canvas.width;
    var h = canvas.height;

    ctx.clearRect(0, 0, w, h);

    // Grid
    ctx.strokeStyle = 'grey';
    ctx.lineWidth = 1;
    ctx.beginPath();
    ctx.moveTo(0, h/2);
    ctx.lineTo(w, h/2);
    ctx.moveTo(w/2, 0);
    ctx.lineTo(w/2, h);
    ctx.stroke();

    if (!floats || floats.length == 0) {
        return;
    }

    ctx.strokeStyle = 'rgba(0, 0, 100, 0.25)';
    ctx.lineWidth = '1';

    var y_scale = h*phaseGain/(2.0*Math.PI);
    var x_step = w / sps;
    var x = -x_step * offset;

    ctx.beginPath();
    var prev_y = (h/2.0)-(floats[fromSample]*y_scale);
    ctx.moveTo(x, prev_y);

    for (var sample_index=fromSample+1; sample_index < toSample; sample_index++) {
        x += x_step;
        var y = (h/2.0)-(floats[sample_index]*y_scale);
        ctx.lineTo(x, y);
        if (x > w) {
            x -= w;
            ctx.moveTo(x-x_step, prev_y);
            ctx.lineTo(x, y);
        }
        prev_y = y;
    }

    ctx.stroke();
}

</script>

</body>

</html>