Git Product home page Git Product logo

gps-overlay-on-video's Introduction

Build Status Codacy Badge codecov.io License: MIT Issues GitHub release

Build Stats

GPS data overlay on videos

The Ultimate Cycling Software

Table of Contents

Download

Download the latest executable jar file (gps-overlay-on-video.jar) from here

Overview

The idea came after I bought a GoPro camera and started to record some of my rides with the bicycle which were also tracked with a GPS device. For tracking the rides I was using the Strava application on my phone or a Garmin Edge 510. After watching the videos I was asked why I'm not showing the speed and altitude information overlaid onto video? Cool, great idea, I wanted to add all kind of telemetry data acquired via the GPS onto the video, but couldn't find a software for it, running on my Mac. So I decided the write one :) The generated video is able to show the current speed or the actual elevation information, eventually the grade of the slope when climbing a steeper section or the current heart rate zone. The main focus is on cycling videos, but with small effort, different gauge templates it is easy to create dashboard for different type of activities.

Example of videos generated with the tool, links to youtube:

Gurten Classic 2015  Zugerberg Classic 2014  Uetliberg Loop 2014

Screenshot of the tool:

latest screenshot

How to use it

how to use 4min Tutorial  how to in german

Basic requirements

Small list of wishes to achieve:

  • show the video file and the track on the map to help synchronizing (shifting) the gps data to the beginning of the video
  • add various gauges (drag'n drop into the video panel) like: speed, cadence, heart rate, altitude, acceleration, temperature, etc.
  • once the gauges were added and adjusted (the size and position) allow to save the configuration as a template, so next time it is easier to just load the template and create the new video
  • and the final bit, export (or generate) to newly created video with the desired gauges.

All the information is extracted from the gps data, since mainly the coordinates and timestamps are known, it is easy to calculate

  • distance
  • speed
  • acceleration
  • direction (compass)
  • provide charts about the elevation
  • etc.

Telemetry data sample collected with a Garmin device (Edge 820):

<trkpt lat="47.1512900" lon="8.7887940">
  <ele>902.4</ele>
  <time>2017-09-24T06:10:53Z</time>
  <extensions>
    <power>205</power>
    <gpxtpx:TrackPointExtension>
      <gpxtpx:atemp>8</gpxtpx:atemp>
      <gpxtpx:hr>160</gpxtpx:hr>
      <gpxtpx:cad>90</gpxtpx:cad>
    </gpxtpx:TrackPointExtension>
  </extensions>
</trkpt>

Credits

The application is using libraries and images created by other people or organizations:

Resources

Links

Useful links and information

Generating new video with gps overlay

After synchronizing the video stream with the gps track (through the shift parameter) everything is prepared to generate a new video:

converter

And here it is :) the first video generated with the software (Zugerberg Classic):

Zugerberg Classic 2014

Gauge ideas

Besides the basic gauge types (speed, cadence, etc.) showing the current value so called chart types are introduced as well. The charts are showing all the data (for example an elevation chart) and the current value.

The very early drafts on the paper, how it started:

gauge ideas

gps-overlay-on-video's People

Contributors

etaque avatar mikwat avatar peregin avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.