Skip to content

Commit

Permalink
metrics : add current position in events.buffer
Browse files Browse the repository at this point in the history 
add a new dynamic canvas with current position
  • Loading branch information
@mangui
mangui committed Mar 23, 2015
1 parent 2fbfb24 commit f3177dd
Show file tree
Hide file tree
Showing 4 changed files with 107 additions and 42 deletions.
96 changes: 75 additions & 21 deletions demo/canvas.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@
var eventNameWidth = 150;
var eventLegendWidth = 120;

var bufferNameWidth = 80;

function canvasLoadUpdate(canvas, minTime, maxTime, events) {
var ctx = canvas.getContext('2d');
for (var i =0, y_offset = 20; i < events.length; i++) {
Expand Down Expand Up @@ -92,27 +94,12 @@
ctx.fillText(legend,x_offset,y_offset);

y_offset += 15;
legend = 'current buffer:' + events[events.length-1].buffer.toFixed(2);
ctx.fillStyle = "blue";
ctx.fillText(legend,x_offset,y_offset);

y_offset += 15;
legend = 'max buffer:' + maxBuffer.toFixed(2) + ' s';
ctx.fillStyle = "blue";
ctx.fillText(legend,x_offset,y_offset);

y_offset += 15;
legend = 'window start time:' + (minTime/1000).toFixed(1) + ' s';
legend = 'window start:' + (minTime/1000).toFixed(1) + ' s';
ctx.fillStyle = "blue";
ctx.fillText(legend,x_offset,y_offset);

y_offset += 15;
legend = 'window end time:' + (maxTime/1000).toFixed(1) + ' s';
ctx.fillStyle = "blue";
ctx.fillText(legend,x_offset,y_offset);

y_offset += 15;
legend = 'current time:' + (events[events.length-1].time/1000).toFixed(1) + ' s';
legend = 'window end:' + (maxTime/1000).toFixed(1) + ' s';
ctx.fillStyle = "blue";
ctx.fillText(legend,x_offset,y_offset);

Expand All @@ -133,13 +120,20 @@
ctx.fill();
}

function canvasTimeRangeUpdate(canvas, minTime, maxTime, windowMinTime, windowMaxTime, events) {
function canvasBufferTimeRangeUpdate(canvas, minTime, maxTime, windowMinTime, windowMaxTime, events) {
var ctx = canvas.getContext('2d'),
bufferChartStart = 0,
bufferChartWidth = ctx.canvas.width;
bufferChartStart = bufferNameWidth,
bufferChartWidth = ctx.canvas.width-bufferChartStart;
x_offset = 0,y_offset = 0;
ctx.clearRect (0,0,canvas.width, canvas.height);

x_offset = 5;
y_offset = 15;
legend = 'buffer';
ctx.fillStyle = "blue";
ctx.font = "15px Arial";
ctx.fillText(legend,x_offset,y_offset);

if(events.length === 0) {
return;
}
Expand All @@ -149,6 +143,11 @@
var buffer = events[i].buffer;
maxBuffer = Math.max(maxBuffer, buffer);
}

y_offset+=15;
legend = 'max:' + maxBuffer.toFixed(2);
ctx.fillText(legend,x_offset,y_offset);

maxBuffer+=10;

ctx.fillStyle = "blue";
Expand All @@ -170,10 +169,65 @@


var x_start = bufferChartStart+bufferChartWidth*(windowMaxTime-minTime)/(maxTime-minTime); ;
var x_w = bufferChartWidth-x_start;
var x_w = canvas.width-x_start;
ctx.fillRect(x_start,0,x_w, canvas.height);
}

function canvasPositionTimeRangeUpdate(canvas, minTime, maxTime, windowMinTime, windowMaxTime, events) {
var ctx = canvas.getContext('2d'),
posChartStart = bufferNameWidth,
posChartWidth = ctx.canvas.width-posChartStart;
x_offset = 0,y_offset = 0;
ctx.clearRect (0,0,canvas.width, canvas.height);

x_offset = 5;
y_offset = 15;
legend = 'position';
ctx.fillStyle = "blue";
ctx.font = "15px Arial";
ctx.fillText(legend,x_offset,y_offset);

if(events.length === 0) {
return;
}

var maxPos = 0;
for (var i =0 ; i < events.length; i++) {
var pos = events[i].pos;
maxPos = Math.max(maxPos, pos);
}

y_offset+=15;
legend = 'max:' + maxPos.toFixed(2);
ctx.fillText(legend,x_offset,y_offset);


maxPos+=10;

ctx.fillStyle = "blue";
ctx.beginPath();
ctx.moveTo(posChartStart, ctx.canvas.height);
for (var i =0 ; i < events.length; i++) {
x_offset = posChartStart + (posChartWidth*(events[i].time-minTime))/(maxTime-minTime);
y_offset = ctx.canvas.height*(1 - events[i].pos/maxPos);
ctx.lineTo(x_offset,y_offset);
}
ctx.lineTo(x_offset, canvas.height);
ctx.fill();

ctx.globalAlpha = 0.7;
ctx.fillStyle = "grey";
var x_start = posChartStart;
var x_w = posChartWidth*(windowMinTime-minTime)/(maxTime-minTime);
ctx.fillRect(x_start,0,x_w, canvas.height);


var x_start = posChartStart+posChartWidth*(windowMaxTime-minTime)/(maxTime-minTime); ;
var x_w = canvas.width-x_start;
ctx.fillRect(x_start,0,x_w, canvas.height);
}


function canvasLoadDrawEvent(ctx,yoffset,event,minTime,maxTime) {
var legend,offset,x_start,x_w,
networkChartStart = eventNameWidth+eventLegendWidth,
Expand Down
20 changes: 13 additions & 7 deletions demo/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,8 +73,9 @@ <h1 class="title">hls.js demo page</h1>
<button onclick="windowEnd=document.getElementById('windowEnd').value">fixed window end(ms)</button>
<input type="text" id='windowEnd' defaultValue="10000" onkeydown="if(window.event.keyCode=='13'){windowEnd=document.getElementById('windowEnd').value;}"><br>
<button onclick="exportmetrics()" style="font-size:18px">metrics permalink</button>
<canvas id="timerange_c" width="640" height="60" style="border:1px solid #000000" onmousedown="timeRangeCanvasonMouseDown(event)" onmousemove="timeRangeCanvasonMouseMove(event)" onmouseup="timeRangeCanvasonMouseUp(event)" onmouseout="timeRangeCanvasonMouseOut(event)";></canvas>
<canvas id="buffertime_c" width="640" height="120" style="border:1px solid #000000";></canvas>
<canvas id="bufferTimerange_c" width="640" height="40" style="border:1px solid #000000" onmousedown="timeRangeCanvasonMouseDown(event)" onmousemove="timeRangeCanvasonMouseMove(event)" onmouseup="timeRangeCanvasonMouseUp(event)" onmouseout="timeRangeCanvasonMouseOut(event)";></canvas>
<canvas id="positionTimerange_c" width="640" height="40" style="border:1px solid #000000" onmousedown="timeRangeCanvasonMouseDown(event)" onmousemove="timeRangeCanvasonMouseMove(event)" onmouseup="timeRangeCanvasonMouseUp(event)" onmouseout="timeRangeCanvasonMouseOut(event)";></canvas>
<canvas id="buffertime_c" width="640" height="80" style="border:1px solid #000000";></canvas>
<canvas id="event_c" width="640" height="15" style="border:1px solid #000000";></canvas><br>
</div>
<div id="buffered_log" style="font-size: small;"></div>
Expand Down Expand Up @@ -216,7 +217,7 @@ <h3> Test Videos </h3>
};
events.load.push(event);
if(hls.bufferTimer === undefined) {
events.buffer.push({ time : 0, buffer : 0});
events.buffer.push({ time : 0, buffer : 0, pos: 0});
hls.bufferTimer = window.setInterval(updateBuffered, 100);
}
refreshCanvas();
Expand Down Expand Up @@ -275,15 +276,20 @@ <h3> Test Videos </h3>
bufferLen = r.end(i) - pos;
}
}
var event = { time : new Date() - t0, buffer : Math.round(bufferLen*100)/100};
var event = { time : new Date() - t0, buffer : Math.round(bufferLen*100)/100, pos: Math.round(pos*100)/100};
var bufEvents = events.buffer, bufEventLen = bufEvents.length;
if(bufEventLen > 1) {
var event0 = bufEvents[bufEventLen-2],event1 = bufEvents[bufEventLen-1];
var slope0 = (event1.buffer - event0.buffer)/(event1.time-event0.time);
var slope1 = (event.buffer - event0.buffer)/(event.time-event0.time);
var slopeBuf0 = (event1.buffer - event0.buffer)/(event1.time-event0.time);
var slopeBuf1 = (event.buffer - event0.buffer)/(event.time-event0.time);

var slopePos0 = (event1.pos - event0.pos)/(event1.time-event0.time);
var slopePos1 = (event.pos - event0.pos)/(event.time-event0.time);
// compute slopes. if less than 10% difference, remove event1
//console.log("Math.abs(slope0/slope1 -1):" + Math.abs(slope0/slope1 -1).toFixed(3));
if(slope0 === slope1 || Math.abs(slope0/slope1 -1) <= 0.1) {
if((slopeBuf0 === slopeBuf1 || Math.abs(slopeBuf0/slopeBuf1 -1) <= 0.1) &&
(slopePos0 === slopePos1 || Math.abs(slopePos0/slopePos1 -1) <= 0.1))
{
bufEvents.pop();
}
}
Expand Down
5 changes: 3 additions & 2 deletions demo/metrics.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,8 +25,9 @@ <h1 class="title">hls.js metrics page</h1>
<input type="text" id='windowStart' defaultValue="0" onkeydown="if(window.event.keyCode=='13'){windowStart=document.getElementById('windowStart').value;refreshCanvas();}">
<button onclick="windowEnd=document.getElementById('windowEnd').value;refreshCanvas();">fixed window end(ms)</button>
<input type="text" id='windowEnd' defaultValue="10000" onkeydown="if(window.event.keyCode=='13'){windowEnd=document.getElementById('windowEnd').value;refreshCanvas();}"><br>
<canvas id="timerange_c" width="640" height="60" style="border:1px solid #000000" onmousedown="timeRangeCanvasonMouseDown(event)" onmousemove="timeRangeCanvasonMouseMove(event)" onmouseup="timeRangeCanvasonMouseUp(event)" onmouseout="timeRangeCanvasonMouseOut(event)";></canvas>
<canvas id="buffertime_c" width="640" height="120" style="border:1px solid #000000";></canvas>
<canvas id="bufferTimerange_c" width="640" height="60" style="border:1px solid #000000" onmousedown="timeRangeCanvasonMouseDown(event)" onmousemove="timeRangeCanvasonMouseMove(event)" onmouseup="timeRangeCanvasonMouseUp(event)" onmouseout="timeRangeCanvasonMouseOut(event)";></canvas>
<canvas id="positionTimerange_c" width="640" height="60" style="border:1px solid #000000" onmousedown="timeRangeCanvasonMouseDown(event)" onmousemove="timeRangeCanvasonMouseMove(event)" onmouseup="timeRangeCanvasonMouseUp(event)" onmouseout="timeRangeCanvasonMouseOut(event)";></canvas>
<canvas id="buffertime_c" width="640" height="80" style="border:1px solid #000000";></canvas>
<canvas id="event_c" width="640" height="15" style="border:1px solid #000000";></canvas><br>

<script src="canvas.js"></script>
Expand Down
28 changes: 16 additions & 12 deletions demo/metrics.js
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,18 @@
function showMetrics() {
document.getElementById('event_c').width = window.innerWidth-30;
document.getElementById('buffertime_c').width = window.innerWidth-30;
document.getElementById('timerange_c').width = window.innerWidth-30;
document.getElementById('buffertime_c').style.display="block";
document.getElementById('timerange_c').style.display="block";
document.getElementById('event_c').style.display="block";
var width = window.innerWidth-30;
document.getElementById('event_c').width =
document.getElementById('buffertime_c').width =
document.getElementById('bufferTimerange_c').width =
document.getElementById('positionTimerange_c').width = width;
document.getElementById('buffertime_c').style.display=
document.getElementById('bufferTimerange_c').style.display=
document.getElementById('positionTimerange_c').style.display =
document.getElementById('event_c').style.display= "block";
}

function hideMetrics() {
document.getElementById('buffertime_c').style.display="none";
document.getElementById('timerange_c').style.display="none";
document.getElementById('bufferTimerange_c').style.display="none";
document.getElementById('event_c').style.display="none";
}

Expand All @@ -22,10 +25,10 @@

var timeRangeMouseDown=false;
function timeRangeCanvasonMouseDown(evt) {
var canvas = document.getElementById('timerange_c'),
var canvas = evt.currentTarget,
bRect = canvas.getBoundingClientRect(),
mouseX = Math.round((evt.clientX - bRect.left)*(canvas.width/bRect.width));
windowStart = Math.round(mouseX * getWindowTimeRange().now / canvas.width);
windowStart = Math.max(0,Math.round((mouseX-bufferNameWidth) * getWindowTimeRange().now / (canvas.width-bufferNameWidth)));
windowEnd = windowStart+500;
timeRangeMouseDown = true;
windowSliding = false;
Expand All @@ -37,10 +40,10 @@ var timeRangeMouseDown=false;

function timeRangeCanvasonMouseMove(evt) {
if(timeRangeMouseDown) {
var canvas = document.getElementById('timerange_c'),
var canvas = evt.currentTarget,
bRect = canvas.getBoundingClientRect(),
mouseX = Math.round((evt.clientX - bRect.left)*(canvas.width/bRect.width)),
pos = Math.round(mouseX * getWindowTimeRange().now / canvas.width);
pos = Math.max(0,Math.round((mouseX-bufferNameWidth) * getWindowTimeRange().now / (canvas.width-bufferNameWidth)));
if(pos < windowStart) {
windowStart = pos;
} else {
Expand Down Expand Up @@ -72,7 +75,8 @@ document.getElementById('windowStart').value=windowStart;document.getElementById
var windowTime = getWindowTimeRange();
canvasLoadUpdate(document.getElementById('event_c'), windowTime.min,windowTime.max, events.load);
canvasBufferUpdate(document.getElementById('buffertime_c'), windowTime.min,windowTime.max, events.buffer);
canvasTimeRangeUpdate(document.getElementById('timerange_c'), 0, windowTime.now, windowTime.min,windowTime.max, events.buffer);
canvasBufferTimeRangeUpdate(document.getElementById('bufferTimerange_c'), 0, windowTime.now, windowTime.min,windowTime.max, events.buffer);
canvasPositionTimeRangeUpdate(document.getElementById('positionTimerange_c'), 0, windowTime.now, windowTime.min,windowTime.max, events.buffer);
} catch(err) {
console.log("refreshCanvas error:" +err.message);
}
Expand Down

0 comments on commit f3177dd

Please sign in to comment.