forked from JuanIrache/dji-srt-viewer
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
91 lines (87 loc) · 3.93 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<!DOCTYPE html>
<html>
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-45790897-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-45790897-1');
</script>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>DJI SRT Flight Data Viewer</title>
<script src='https://api.mapbox.com/mapbox-gl-js/v0.44.1/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v0.44.1/mapbox-gl.css' rel='stylesheet' />
<script src="libraries/p5.min.js"></script>
<script src="libraries/p5.dom.min.js"></script>
<script src="bundle.js"></script>
<style>
*{margin:0;}
#container1{
height: 100%;
width: 100%;
overflow: hidden;
}
#container2{
width: 100%;
height: 100%;
overflow: auto;
padding-right: 0px; /* exact value is given in JavaScript code */
}
html, body{
height: 100%;
overflow:hidden;
}
H1,H3,p {
font-family: Sans-serif;
text-align:center;
color:#555555;
}
H1 {
margin-top:20px;
font-size:30px;
margin-bottom:5px;
}
H3 {
font-size:20px;
margin-top:8px;
margin-bottom:8px;
}
p {
font-size:15px;
}
.foot {
text-align:left;
font-size:12px;
}
#text {
margin-top:5px;
margin-bottom:20px;
}
</style>
</head>
<body>
<div id="container1"><div id="container2">
<span id="p"></span>
<div id="text">
<p class="foot">Satellite and Map images created with: © <a href='https://www.mapbox.com/about/maps/'>Mapbox</a> © <a href='http://www.openstreetmap.org/copyright'>OpenStreetMap</a> <strong><a href='https://www.mapbox.com/map-feedback/' target='_blank'>Improve this map</a></strong></p>
<H1>DJI SRT Flight Data Viewer</H1>
<H3>Visualize and export your DJI Mavic Pro flight data (and some other drones) easily.</H3>
<p>Turn on Video Captions in your camera settings within the DJI Go4 App and you will find SRT files alongside your movie clips. You can use this tool to interpret those files.</p>
<p>The data included is not as accurate as the drone could produce, but since that is all we have we decided to apply smoothing to it to and produce a more meaningful interpretation of your flights. This is not necessarily more accurate.</p>
<p>You can tweak smoothness, load satellite or maps of the location, drag over the graphs or timeline to view data in specific moments/places, export your data to other formats or launch Google Maps exactly where you shot something.</p>
<p>Export to KML to visualise on Google Earth, and to GPX or CSV for other software.</p>
<p>Phantom 4 Pro (P4P) files have embedded subtitles instead of SRT files. You can try extracting the SRT data with <a href="http://tailorandwayne.com/dji-srt-viewer/srt-extractor/srt-extractor.zip">this script</a> (experimental).</p>
<p>You can also load GPS data in other formats, such as GPX, KML, JSON and GeoJSON. This is experimental, so let me know if your files do not display correctly. To load GoPro Metadata, you can extract it first using <a href="http://tailorandwayne.com/GPMD2CSV.zip">this tool</a>.</p>
<p>Note that so far this has mostly been tested with Mavic Pro SRT files. Bugs are to be expected.</p>
<p>Please get in touch <a href="https://forum.dji.com/thread-140031-1-1.html" target="blank">here</a> if you tried your drone SRT files and got no results. You can also suggest new features or share with us what you created with this tool.</p>
<p>Source code <a href="https://github.com/JuanIrache/dji-srt-viewer" target="_blank">here</a>.</p>
<p>Built with <a href="https://p5js.org" target="_blank">P5js</a>.</p>
<p>If you liked this tool you might like some of these <a href="http://tailorandwayne.com/coding-projects/" target="_blank">creative coding projects</a>.</p>
</div>
</div></div>
</body>
</html>