Animated Speedometer & Altimeter for GPS data

I have created an HTML file that you can use to display speed information (such as obtained from a CPS Tracker device) as a speedometer (and elevation data as an altimeter). It uses a javascript library described here:

The data needs to be in the GPX XML format. If your data is not in this format you can try converting it here: GPS Visualizer: Convert GPS files to plain text or GPX

You can easily record the animation (e.g. using the html as a browser-source in OBS Studio) and include the animation either as a “picture-in-picture” format using the Size-Position-Rotate filter, or as a transparent overlay using the "Chroma-Key filter. For more information on how to use this see: Resources for Shotcut

Short example:


There is now a version that can be used as a Text:HTML filter with earlier versions of Shotcut that support that feature e.g. v20.07.11. This makes it easy to create a transparent overlay rather than using a green-screen / Chroma-key solution.

To find out more information see: Resources for Shotcut

1 Like

This looks amazing. I remember seeing people requesting something like this. Too bad they don’t seem to have noticed this thread…