зеркало из https://github.com/mozilla/eideticker.git
Bug 943119 - Allow stepping through frame-by-frame in framediff view;r=davehunt
This commit is contained in:
William Lachance
Родитель
9af8377b04
Коммит
8b159b0a39
|
|
@ -238,6 +238,7 @@ def main(args=sys.argv[1:]):
|
|||
if options.outputdir:
|
||||
for dirname in [ options.outputdir,
|
||||
os.path.join(options.outputdir, 'css'),
|
||||
os.path.join(options.outputdir, 'fonts'),
|
||||
os.path.join(options.outputdir, 'js'),
|
||||
os.path.join(options.outputdir, 'videos'),
|
||||
os.path.join(options.outputdir, 'framediffs'),
|
||||
|
|
@ -245,18 +246,23 @@ def main(args=sys.argv[1:]):
|
|||
if not os.path.exists(dirname):
|
||||
os.makedirs(dirname)
|
||||
for filename in [
|
||||
'metric.html',
|
||||
'framediff-view.html',
|
||||
'css/bootstrap.min.css',
|
||||
'fonts/glyphicons-halflings-regular.eot',
|
||||
'fonts/glyphicons-halflings-regular.svg',
|
||||
'fonts/glyphicons-halflings-regular.ttf',
|
||||
'fonts/glyphicons-halflings-regular.woff',
|
||||
'framediff-view.html',
|
||||
'js/ICanHaz.min.js',
|
||||
'js/SS.min.js',
|
||||
'js/bootstrap.min.js',
|
||||
'js/common.js',
|
||||
'js/framediff.js',
|
||||
'js/jquery-1.7.1.min.js',
|
||||
'js/jquery.flot.axislabels.js',
|
||||
'js/jquery.flot.js',
|
||||
'js/jquery.flot.stack.js',
|
||||
'js/metric.js' ]:
|
||||
'js/metric.js',
|
||||
'metric.html' ]:
|
||||
if filename == 'metric.html':
|
||||
outfilename = 'index.html'
|
||||
else:
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
../../bootstrap/fonts/glyphicons-halflings-regular.eot
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../bootstrap/fonts/glyphicons-halflings-regular.svg
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../bootstrap/fonts/glyphicons-halflings-regular.ttf
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../bootstrap/fonts/glyphicons-halflings-regular.woff
|
||||
|
|
@ -47,12 +47,24 @@
|
|||
background-color: #eee;
|
||||
padding: 2px;
|
||||
}
|
||||
.modal-title {
|
||||
float: left;
|
||||
padding-right: 4px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
.modal-title h4 {
|
||||
margin-top: 6px;
|
||||
}
|
||||
.inline-video {
|
||||
height: 200px;
|
||||
width: 100%;
|
||||
}
|
||||
#videobox {
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="content">
|
||||
|
|
@ -60,10 +72,11 @@
|
|||
</div>
|
||||
<div id="maincontent">
|
||||
</div>
|
||||
<p class="help-block">Click on a point on the graph to see associated point in capture.</p>
|
||||
<p class="help-block">Hover over a point on the graph to skip to associated point in capture.</p>
|
||||
</div>
|
||||
</div>
|
||||
<script src="js/jquery-1.7.1.min.js"></script>
|
||||
<script src="js/bootstrap.min.js"></script>
|
||||
<script src="js/ICanHaz.min.js"></script>
|
||||
<script src="js/jquery.flot.js"></script>
|
||||
<script src="js/jquery.flot.time.js"></script>
|
||||
|
|
@ -73,6 +86,26 @@
|
|||
<script src="js/common.js"></script>
|
||||
<script src="js/framediff.js"></script>
|
||||
|
||||
<script id="videoDetail" type="text/html">
|
||||
<div class="modal fade" id="videoDetailModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
||||
<div class="modal-title"><h4>{{title}}</h4></div>
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-default btn-back"><span class="glyphicon glyphicon-step-backward"></span> Back</button>
|
||||
<button type="button" class="btn btn-default btn-forward"><span class="glyphicon glyphicon-step-forward"></span> Forward</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<video src="{{videoPath}}" id="large-video" style="width:100%;"></video>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<script id="pageHeader" type="text/html">
|
||||
<h1 id="page-title">{{title}}</h1>
|
||||
</script>
|
||||
|
|
@ -82,8 +115,10 @@
|
|||
<div id="graph-container"></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<video src="{{videoPath}}" class="inline-video" id="frameview">
|
||||
<div class="col-md-3">
|
||||
<a class="thumbnail" id="videobox">
|
||||
<video src="{{videoPath}}" class="inline-video" id="frameview"></video>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-md-6" id="datapoint">
|
||||
</div>
|
||||
|
|
@ -94,6 +129,8 @@
|
|||
<dl>
|
||||
<dt>Time</dt>
|
||||
<dd>{{time}}s</dd>
|
||||
<dt>Frame</dt>
|
||||
<dd>{{frameNum}}</dd>
|
||||
<dt>Pixel Difference to Previous Frame</dt>
|
||||
<dd>{{framediff}}</dd>
|
||||
{{#eventName}}
|
||||
|
|
@ -101,6 +138,10 @@
|
|||
<dd>{{eventName}}</dd>
|
||||
{{/eventName}}
|
||||
</dl>
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-default btn-back"><span class="glyphicon glyphicon-step-backward"></span> Back</button>
|
||||
<button type="button" class="btn btn-default btn-forward"><span class="glyphicon glyphicon-step-forward"></span> Forward</button>
|
||||
</div>
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,10 @@
|
|||
"use strict";
|
||||
|
||||
$(function() {
|
||||
|
||||
var title = getParameterByName('title');
|
||||
document.title = title;
|
||||
|
||||
function render(diffsums, actions) {
|
||||
var seriesList = [];
|
||||
var currentSeries = null;
|
||||
|
|
@ -90,21 +94,112 @@ $(function() {
|
|||
});
|
||||
|
||||
var previousPoint = null;
|
||||
graphContainer.bind("plothover", function (event, pos, item) {
|
||||
var video = $("#frameview").get(0);
|
||||
video.currentTime = item.datapoint[0];
|
||||
var currentTime = 0.0;
|
||||
var frameNum = 0;
|
||||
|
||||
if (item) {
|
||||
var t = item.datapoint[0].toFixed(8);
|
||||
$("#datapoint").html(ich.graphDatapoint({ 'time': t,
|
||||
'framediff': item.datapoint[1],
|
||||
'eventName': item.series.label }));
|
||||
function datumSelected(datum, series) {
|
||||
plot.unhighlight();
|
||||
plot.highlight(series, datum);
|
||||
currentTime = datum[0];
|
||||
frameNum = parseInt(currentTime * fps);
|
||||
|
||||
var video = $("#frameview").get(0);
|
||||
video.currentTime = currentTime;
|
||||
$("#datapoint").html(ich.graphDatapoint({ 'time': currentTime.toFixed(8),
|
||||
'frameNum': frameNum,
|
||||
'framediff': datum[1],
|
||||
'eventName': series.label }));
|
||||
var modal = $('#videoDetailModal');
|
||||
if (modal.length) {
|
||||
var largeVideo = $("#large-video").get(0);
|
||||
largeVideo.currentTime = currentTime;
|
||||
$(".modal-title").html("<h4>Frame " + frameNum + "</h4>");
|
||||
}
|
||||
updateButtons();
|
||||
}
|
||||
|
||||
function updateButtons() {
|
||||
$(".btn-forward").unbind('click');
|
||||
$(".btn-back").unbind('click');
|
||||
|
||||
function forward() {
|
||||
var foundElement = false;
|
||||
plot.getData().some(function(series) {
|
||||
series.data.some(function(datum) {
|
||||
if (datum[0] > currentTime) {
|
||||
datumSelected(datum, series);
|
||||
foundElement = true;
|
||||
}
|
||||
return foundElement;
|
||||
});
|
||||
|
||||
return foundElement;
|
||||
});
|
||||
}
|
||||
|
||||
function backward() {
|
||||
var foundElement = false;
|
||||
plot.getData().some(function(series) {
|
||||
var prevDatum = null;
|
||||
var prevSeries = null;
|
||||
series.data.some(function(datum) {
|
||||
if (prevDatum && Math.abs(datum[0] - currentTime) < 0.00001) {
|
||||
datumSelected(prevDatum, prevSeries);
|
||||
foundElement = true;
|
||||
}
|
||||
prevDatum = datum;
|
||||
prevSeries = series;
|
||||
return foundElement;
|
||||
});
|
||||
|
||||
return foundElement;
|
||||
});
|
||||
}
|
||||
|
||||
$(".btn-forward").click(function() {
|
||||
$(".btn-forward").blur();
|
||||
forward()
|
||||
return false;
|
||||
});
|
||||
|
||||
$(".btn-back").click(function() {
|
||||
$(".btn-back").blur();
|
||||
backward()
|
||||
return false;
|
||||
});
|
||||
|
||||
document.onkeydown = function(e) {
|
||||
console.log("HEY");
|
||||
if (e.keyCode == '37') {
|
||||
// left arrow
|
||||
backward();
|
||||
}
|
||||
else if (e.keyCode == '39') {
|
||||
// right arrow
|
||||
forward();
|
||||
}
|
||||
}
|
||||
}
|
||||
updateButtons();
|
||||
|
||||
graphContainer.bind("plothover", function (event, pos, item) {
|
||||
if (item) {
|
||||
datumSelected(item.datapoint, item.series);
|
||||
}
|
||||
});
|
||||
$('#videobox').click(function() {
|
||||
$('#videoDetailModal').remove();
|
||||
$('body').after(ich.videoDetail({'title': 'Frame ' + frameNum,
|
||||
'videoPath': getParameterByName('video') }));
|
||||
$('#videoDetailModal').modal();
|
||||
var video = $("#large-video").get(0);
|
||||
video.addEventListener('loadedmetadata', function() { video.currentTime = currentTime; }, false);
|
||||
updateButtons();
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
$('#header').html(ich.pageHeader({ 'title': getParameterByName('title') }));
|
||||
$('#header').html(ich.pageHeader({ 'title': title }));
|
||||
$('#maincontent').html(ich.pageContent({ 'videoPath': getParameterByName('video') }));
|
||||
|
||||
$.getJSON(getParameterByName('framediff'), function(framediff) {
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче