@@ -14,24 +14,41 @@
}
function refresh() {
resizeDomList(logListDom, dataJson.length, '<div></div>');
for (let i = 0; i < dataJson.length; i += 1) {
let aggregateFeatures = [];
resizeDomList(logListDom, dataJson.length + 1, '<div></div>');
let i = 0;
for (; i < dataJson.length; i += 1) {
const msg = dataJson[i];
const divDom = logListDom.children[i];
switch (msg.type) {
case 'waveform':
renderWaveform(divDom, msg.name, msg.data);
renderWaveform(divDom, msg.name, msg.data, -1, 1);
break;
case 'text':
renderText(divDom, msg.name, msg.data);
break;
case 'featureset':
aggregateFeatures = aggregateFeatures.concat(msg.data);
renderWaveform(divDom, msg.name, msg.data, 0, 1);
break;
case 'graph':
renderWaveform(divDom, msg.name, msg.data, -100, 100);
break;
default:
renderText(divDom, msg.name + "(unrecognized log type: " + msg.type + ")", "" + msg.data);
break;
}
}
{
const divDom = logListDom.children[i];
renderWaveform(divDom, "aggregated featuresets", aggregateFeatures, 0, 1);
}
}
function resizeDomList(listDom, desiredLen, templateHtml) {
@@ -45,7 +62,7 @@
}
}
function renderWaveform(parentDiv, label, data) {
function renderWaveform(parentDiv, label, data, min, max) {
parentDiv.innerHTML = '<h4></h4><canvas></canvas>';
const headerDom = parentDiv.children[0];
const canvas = parentDiv.children[1];
@@ -64,8 +81,10 @@
ctx.strokeStyle = "white";
for (let x = 0; x < width; x += 1) {
const y = data[x];
ctx.moveTo(x + 0.25, (height / 2) + 0.75);
ctx.lineTo(x + 0.25, (height / 2) + (y * (height / 2)) - 0.75);
const pixY = (y - min) / (max - min) * height;
const pix0 = (0 - min) / (max - min) * height;
ctx.moveTo(x + 0.25, pix0 + 0.75);
ctx.lineTo(x + 0.25, pixY - 0.75);
}
ctx.stroke();
}
@@ -77,52 +96,4 @@
labelDom.innerText = label;
textDom.innerText = data;
}
function draw(canvas, songJson) {
const ctx = canvas.getContext("2d");
const split = songJson.length / 2;
const width = split; // / 3;
const height = 256;
canvasDom.width = width;
canvasDom.height = height;
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.lineWidth = 1;
//drawPeak(canvas, songJson, width, height, 0, peakColorLeftDom.value, +peakOpacityLeftDom.value);
//drawPeak(canvas, songJson, width, height, split, peakColorRightDom.value, +peakOpacityRightDom.value);
drawRms(canvas, songJson, width, height, 0, rmsColorLeftDom.value, +rmsOpacityLeftDom.value);
drawRms(canvas, songJson, width, height, split, rmsColorRightDom.value, +rmsOpacityRightDom.value);
}
function drawPeak(canvas, songJson, width, height, offset, color, opacity) {
const ctx = canvas.getContext("2d");
ctx.globalAlpha = opacity;
ctx.beginPath();
ctx.strokeStyle = color;
for (let x = 0; x < width; x += 1) {
const min = songJson[offset + x * 3 + 0];
const max = songJson[offset + x * 3 + 1];
const min_y = height - (127 - min) / 256 * height;
const max_y = height - (127 - max) / 256 * height;
ctx.moveTo(x + 0.25, max_y);
ctx.lineTo(x + 0.25, min_y);
}
ctx.stroke();
}
function drawRms(canvas, songJson, width, height, offset, color, opacity) {
const ctx = canvas.getContext("2d");
console.log("rms global alpha=", ctx.globalAlpha);
ctx.globalAlpha = opacity;
ctx.beginPath();
ctx.strokeStyle = color;
for (let x = 0; x < width; x += 1) {
const rms = songJson[offset + x * 1 + 0];
//const max = (rms / 256) * (height / 2);
ctx.moveTo(x + 0.25, (height / 2) + 0.75);
ctx.lineTo(x + 0.25, (height / 2) + (rms * (height / 2)) - 0.75);
}
ctx.stroke();
}
})();