Skip to content

Commit c67a0d3

Browse files
thenickdudethenickdude
committed
Add export feature for WebM video
Package as Chrome App Scale up fonts and line weights as screen size increases
1 parent 8b8450b commit c67a0d3

18 files changed

+2457
-110
lines changed

‎.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
/.settings/
22
/.project
33
.DS_Store
4+
/blackbox-chrome-app.zip

‎Makefile

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
# Package up the current git revision for submission to the Chrome webstore
2+
all : blackbox-chrome-app.zip
3+
4+
clean :
5+
rm blackbox-chrome-app.zip
6+
7+
blackbox-chrome-app.zip : js/*
8+
git archive --format zip --output $@ master

‎background.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
chrome.app.runtime.onLaunched.addListener(function() {
2+
chrome.app.window.create('index.html', {
3+
'id': 'main',
4+
'innerBounds' : {
5+
'width' : 1340,
6+
'height' : 900
7+
}
8+
});
9+
});

‎css/main.css

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,10 @@ body {
22
padding-bottom:2em;
33
}
44

5+
html, body {
6+
overflow-y: visible; /* Show page scrollbar when packaged as a Chrome app */
7+
}
8+
59
/* Add an extended wide size to the page container for large monitors */
610
@media (min-width: 1400px) {
711
.container.main-pane {
@@ -294,4 +298,35 @@ html.has-video .main-pane {
294298
html.has-log .welcome-pane,
295299
html.has-video .welcome-pane {
296300
display:none;
301+
}
302+
303+
.btn-video-export.disabled {
304+
pointer-events:all !important;
305+
}
306+
.btn-video-export {
307+
display:none;
308+
}
309+
html.has-log .btn-video-export {
310+
display:inline-block;
311+
}
312+
313+
.pane-video-settings, .pane-video-progress, .pane-video-complete {
314+
display:none;
315+
}
316+
.video-export-mode-settings .pane-video-settings,
317+
.video-export-mode-progress .pane-video-progress,
318+
.video-export-mode-complete .pane-video-complete {
319+
display:block;
320+
}
321+
322+
.video-dim-section {
323+
display:none;
324+
}
325+
html.has-video .video-dim-section {
326+
display:block;
327+
}
328+
329+
progress {
330+
width:100%;
331+
height:20px;
297332
}

‎images/icon-128.png

10.5 KB
Loading

‎index.html

Lines changed: 119 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@
2525
</div>
2626
<div id="navbar" class="navbar-collapse collapse">
2727
<div class="navbar-form navbar-right" role="form">
28+
<a class="btn btn-default btn-video-export"> Export video...</a>
2829
<span class="btn btn-primary btn-file"> Open log file/video <input type="file" class="file-open" multiple></span>
2930
</div>
3031
</div>
@@ -115,9 +116,11 @@ <h1>Welcome to Blackbox Explorer!</h1>
115116
to convert your log file into a CSV file for analysis.
116117
</p>
117118
<p>
118-
If you want to turn your log into a video, you can use the <a href="https://github.com/cleanflight/blackbox-tools">blackbox_render tool</a>
119-
tool to turn your log into a series of PNG files. Alternatively, use a computer
120-
screen recording tool to record the playback of this log viewer.
119+
If you want to share your log as a video, you can use the "export video" button at the
120+
top to render a WebM video, or use the commandline
121+
<a href="https://github.com/cleanflight/blackbox-tools">blackbox_render tool</a>
122+
tool to turn your log into a series of PNG files, or use a
123+
screen recording tool to record the playback of this log viewer.
121124
</p>
122125
</div>
123126
</div>
@@ -137,12 +140,14 @@ <h3 class="log-filename"></h3>
137140
</div>
138141
<div class="form-group log-device-uid-header">
139142
<label class="col-sm-3 control-label">Device UID</label>
140-
<div class="col-sm-9 log-device-uid form-control-static">
143+
<div class="col-sm-9">
144+
<p class="log-device-uid form-control-static"></p>
141145
</div>
142146
</div>
143147
<div class="form-group">
144148
<label class="col-sm-3 control-label">Battery</label>
145-
<div class="col-sm-9 log-cells form-control-static">
149+
<div class="col-sm-9">
150+
<p class="log-cells form-control-static"></p>
146151
</div>
147152
</div>
148153
</div>
@@ -278,17 +283,120 @@ <h4 class="modal-title">Configure graphs</h4>
278283
<button type="button" class="btn btn-primary graph-configuration-dialog-save" data-dismiss="modal">Save changes</button>
279284
</div>
280285
</div>
281-
<!-- /.modal-content -->
282286
</div>
283-
<!-- /.modal-dialog -->
284287
</div>
285-
<!-- /.modal -->
288+
289+
<div class="modal fade" id="dlgVideoExport">
290+
<div class="modal-dialog">
291+
<div class="modal-content">
292+
<div class="modal-header">
293+
<h4 class="modal-title">Export video</h4>
294+
</div>
295+
<div class="modal-body">
296+
<div class="pane-video-settings form-horizontal">
297+
<div class="form-group">
298+
<label class="col-sm-3 control-label">Video duration</label>
299+
<div class="col-sm-9">
300+
<p class="form-control-static video-duration"></p>
301+
<p>You can use the I (In) and O (Out) keys while
302+
viewing the log to mark the start and end points of the video</p>
303+
</div>
304+
</div>
305+
<div class="form-group">
306+
<label class="col-sm-3 control-label">Framerate</label>
307+
<div class="col-sm-9">
308+
<select class="form-control video-frame-rate">
309+
<option value="15">15 fps</option>
310+
<option value="30">30 fps</option>
311+
<option value="60">60 fps</option>
312+
<option value="120">120 fps</option>
313+
<option value="240">240 fps</option>
314+
</select>
315+
</div>
316+
</div>
317+
<div class="form-group">
318+
<label class="col-sm-3 control-label">Resolution</label>
319+
<div class="col-sm-9">
320+
<select class="form-control video-resolution">
321+
<option value="854x480">480p</option>
322+
<option value="1280x720">720p</option>
323+
<option value="1920x1080">1080p</option>
324+
</select>
325+
</div>
326+
</div>
327+
<div class="form-group video-dim-section">
328+
<label class="col-sm-3 control-label">Dim flight video</label>
329+
<div class="col-sm-9">
330+
<select class="form-control video-dim">
331+
<option value="0.0">0%</option>
332+
<option value="0.2">20%</option>
333+
<option value="0.4">40%</option>
334+
<option value="0.5">50%</option>
335+
<option value="0.6">60%</option>
336+
<option value="0.8">80%</option>
337+
<option value="1.0">100%</option>
338+
</select>
339+
</div>
340+
</div>
341+
<div class="form-group">
342+
<label class="col-sm-3 control-label">Video format</label>
343+
<div class="col-sm-9">
344+
<p class="form-control-static video-format">WebM</p>
345+
</div>
346+
</div>
347+
<div class="form-group">
348+
<label class="col-sm-3 control-label">Audio format</label>
349+
<div class="col-sm-9">
350+
<p class="form-control-static audio-format">Not supported yet (no audio will be included)</p>
351+
</div>
352+
</div>
353+
</div>
354+
<div class="pane-video-progress">
355+
<progress max="100" value="0"></progress>
356+
357+
<div class="form-horizontal">
358+
<div class="form-group">
359+
<label class="col-sm-3 control-label">Rendered frames</label>
360+
<div class="col-sm-9">
361+
<p class="form-control-static video-export-rendered-frames"></p>
362+
</div>
363+
</div>
364+
<div class="form-group">
365+
<label class="col-sm-3 control-label">File size</label>
366+
<div class="col-sm-9">
367+
<p class="form-control-static video-export-size"></p>
368+
<div class="alert alert-danger" role="alert">You must install this tool as a Chrome App in order to export videos larger than 500MB</div>
369+
</div>
370+
</div>
371+
<div class="form-group">
372+
<label class="col-sm-3 control-label">Remaining time</label>
373+
<div class="col-sm-9">
374+
<p class="form-control-static video-export-remaining"></p>
375+
</div>
376+
</div>
377+
</div>
378+
</div>
379+
<div class="pane-video-complete">
380+
<p class="video-export-result"></p>
381+
</div>
382+
</div>
383+
<div class="modal-footer">
384+
<button type="button" class="btn btn-default video-export-dialog-cancel" data-dismiss="modal">Cancel</button>
385+
<button type="button" class="btn btn-default video-export-dialog-close" data-dismiss="modal">Close</button>
386+
<button type="button" class="btn btn-primary video-export-dialog-start">Begin export</button>
387+
</div>
388+
</div>
389+
</div>
390+
</div>
286391

287392
<script src="js/vendor/jquery-1.11.3.min.js"></script>
288393
<script src="js/vendor/bootstrap.min.js"></script>
289394
<script src="js/vendor/jquery.ba-throttle-debounce.js"></script>
290395
<script src="js/vendor/three.min.js"></script>
291396
<script src="js/vendor/jquery.nouislider.all.min.js"></script>
397+
<script src="js/vendor/FileSaver.js"></script>
398+
<script src="js/vendor/webm-writer-0.1.0.js"></script>
399+
<script src="js/pref_storage.js"></script>
292400
<script src="js/tools.js"></script>
293401
<script src="js/cache.js"></script>
294402
<script src="js/expo.js"></script>
@@ -307,6 +415,9 @@ <h4 class="modal-title">Configure graphs</h4>
307415
<script src="js/graph_legend.js"></script>
308416
<script src="js/graph_config_dialog.js"></script>
309417
<script src="js/seekbar.js"></script>
418+
<script src="js/video_export_dialog.js"></script>
419+
<script src="js/flightlog_video_renderer.js"></script>
420+
<script src="js/graph_config.js"></script>
310421
<script src="js/main.js"></script>
311422
</body>
312423
</html>

‎js/craft_3d.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -175,7 +175,7 @@ function Craft3D(flightLog, canvas, propColors) {
175175

176176
var
177177
scene = new THREE.Scene(),
178-
camera = new THREE.PerspectiveCamera(40, canvas.width / canvas.height, 0.1, 1000),
178+
camera = new THREE.PerspectiveCamera(40, 1, 0.1, 1000),
179179

180180
renderer = new THREE.WebGLRenderer({canvas : canvas, alpha: true}),
181181

@@ -296,7 +296,7 @@ function Craft3D(flightLog, canvas, propColors) {
296296
canvas.width = width;
297297
canvas.height = height;
298298

299-
renderer.setViewport(0, 0, canvas.clientWidth, canvas.clientHeight);
299+
renderer.setViewport(0, 0, width, height);
300300

301301
camera.updateProjectionMatrix();
302302
}

‎js/flightlog.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -93,15 +93,15 @@ function FlightLog(logData) {
9393
};
9494

9595
/**
96-
* Get the earliest time seen in the log of the given index, or leave off the logIndex
96+
* Get the earliest time seen in the log of the given index (in microseconds), or leave off the logIndex
9797
* argument to fetch details for the current log.
9898
*/
9999
this.getMinTime = function(logIndex) {
100100
return getRawStats(logIndex).frame["I"].field[FlightLogParser.prototype.FLIGHT_LOG_FIELD_INDEX_TIME].min;
101101
};
102102

103103
/**
104-
* Get the latest time seen in the log of the given index, or leave off the logIndex
104+
* Get the latest time seen in the log of the given index (in microseconds), or leave off the logIndex
105105
* argument to fetch details for the current log.
106106
*/
107107
this.getMaxTime = function(logIndex) {

0 commit comments

Comments
 (0)