GPS telemetry overlay


#1

Hello,

I’m pretty new to shotcut, been using Kdenlive for several years now. But I was to have gps telemetry overlays for my cycling videos. Currently I use a separate app for that and then bring that rendered video into kdenlive. But I was to have it all in one of course!

So I saw that shotcut has the ability to display a webpage as an overlay. I tested it with just some text and it worked perfectly. Now I’m wondering if I could create a javascript app that would read my .gpx files, do the calculation and finally have that pulled in as an overlay on my video.

Over the past few days I’ve been playing around with writing such an app in javascript and I can read in my .gpx file, I can do at least some of the calculations, but that’s as far as I’ve gotten so far. But I started thinking how does shotcut actually display the javascript pages? Like how would you sync points in the video with evens in javascript? I did see there was something called web VFX I believe it was called? Is that what that’s about? Any help would be greatly appreciated.

thank you,
Bruce


#2

@bruce_chastain

gpx files are xml text files (example below), so get yourself a javascript xml parser, include it in a html file and use Webvfx and you should be good to go.

https://github.com/Luuka/gpx-parser


#3

Not sure if this is something you could use.


#4

Thanks for that, not exactly what I was looking for but I followed the website and am looking at the html file it generates for you and I’m getting an idea of how webvfx is connecting to shotcut.


#5

thanks. do you think I should use an already built parser, I was thinking I could do it myself being it’s pretty simple use case. If you think a parser would be better, do you have a favorite? btw I’m not a professional developer, I just sort of hack stuff together, mostly with python, so JS is new to me.


#6

Parsing XML is super easy in Javascript: check DOMParser. Then you can use XPath to extract data from your GPX parsed document.


#7

thanks all for the tips and stuff. I’m working at it now. But one thing I’m not liking is that I’m having to run a local web server to read the .gpx file. I’ve searched and I’m not seeing that it’s possible to read local files like that in javascript. If that’s true, is there a simple way that I can get a webserver running so that a normal user doesn’t have to mess with it? Or am I looking at this problem all wrong. Basically I don’t want to have to host a website for this.


#8

One problem is how to actually get the GPX data into the HTML/javascript.

Rather than mess about with XML parsers I would feed my GPX file into an on-line utility that converts the XML into a JSON object (e.g. https://codebeautify.org/xmltojson). Save this into its own javascript file and edit this file to put “gpj =” at the start and a semicolon “;” at the end. Include this script file as the first javascript file in the HTML, then you can access the object simply as “gpj” in your own javascript file. e.g.

<xml version="1.0" encoding="UTF-8">
<gpx version="1.0">
    <name>Example</name>
    <wpt lat="48.1234" lon="8.1234">
        <ele>2372</ele>
        <name>LAGORETICO</name>
    </wpt>
    <trk>
        <name>Example</name>
        <number>1</number>
        <trkseg>
            <trkpt lat="48.2345" lon="8.2345">
                <ele>2376</ele>
                <time>2017-10-14T10:09:57Z</time>
            </trkpt>
            <trkpt lat="48.3456" lon="8.3456">
                <ele>2375</ele>
                <time>2017-10-14T10:10:557Z</time>
            </trkpt>
        </trkseg>
    </trk>
</gpx>
after running it through the online converter and editing it you save it to the file "gpj.js":
var gpj = {
"xml": {
	"gpx": {
		"name": "Example",
		"wpt": {
			"ele": "2372",
			"name": "LAGORETICO",
			"_lat": "48.1234",
			"_lon": "8.1234"
		},
		"trk": {
			"name": "Example",
			"number": "1",
			"trkseg": {
				"trkpt": [
					{
						"ele": "2376",
						"time": "2017-10-14T10:09:57Z",
						"_lat": "48.2345",
						"_lon": "8.2345"
					},
					{
						"ele": "2375",
						"time": "2017-10-14T10:10:557Z",
						"_lat": "48.3456",
						"_lon": "8.3456"
					}
				]
			}
		},
		"_version": "1.0"
	},
	"_version": "1.0",
	"_encoding": "UTF-8"
}
};

Then you can process this with javascript and HTML e.g.:

<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>GPX JSON demo</title>
	<script src="gpj.js"></script>
</head>
<body>
    <h1>Print the trkpt data below</h1>
    <div id='viewer'>
</div>

<script>
var viewer = document.getElementById("viewer");
var info   = '';

console.log(gpj);

gpj.xml.gpx.trk.trkseg.trkpt.forEach(myFunction); 

viewer.innerHTML = info;
function myFunction(item, index) 
{
	info += '<p>' +
			'ele = '  + item.ele  + '<br>' +
			'time = ' + item.time + '<br>' +
			'lat= '   + item._lat + '<br>' +
			'lon = '  + item._lon + '</p>';
}

</script>
</body>
</html>

This produces the following webpage:

Print the trkpt data below

ele = 2376
time = 2017-10-14T10:09:57Z
lat= 48.2345
lon = 8.2345

ele = 2375
time = 2017-10-14T10:10:557Z
lat= 48.3456
lon = 8.3456


#9

If you could give me an example of what you are trying to achieve (e.g. pointer to a movie you’ve already made showing the telemetry data) then I could give you some idea how to use the framework that I’ve set up (which uses shotcut’e webvfx javascript library), to integrate this display with your video.


#10

hmm I really like this approach. Maybe it doesn’t have to be so tightly integrated, maybe for now I should just try to get something going. And honestly I only make these types a videos a handful of times per year, it’s not a big deal to do a little work to get it going. I’ll play around with this after the family gets to sleep tonight.


#11

Here is an example of the the last video I did with overlays from a garmin app using a windows VM.


#12

skip to like 3:40 for example in the video. in the lower left I have my speed and heat rate which are both inside the .gpx file.


#13

To get an idea of how to use my WebVfx framework to do what you want have a look at the “User Supplied” section of my webpage at http://www.elusien.co.uk/shotcut/
See the forum thread HTML Filters: Titles, Scrolling Credits, Stopwatches, Gauges etc as well.
Also, check out the video there showing basic examples of what it can do. If you need any help just let me know, - Neil.


#14

thanks a lot for taking the time to point me in the right direction. I’ll post back here with updates.