OVERLAY

Overlay is an easy way to add telemetry to your videos. You can film the video with the camera of your choice and record the telemetry data separately with the metr app. Then you combine them together. Using this web application you can generate the video with a green background. Afterwards you overlay it on the footage with your favourite video editor. Here is how you do it:

1. Open your record in Google Chrome on Windows, Linux or Mac. It is very important to use Google Chrome, other browsers will not work.

2. Replace `r` with `overlay` in the address bar.

3. In the upper part you will see three text areas with the code. Those are HTML, CSS and Javascript. You can customize absolutely everything. But I recommend to try built-in presets first.

4. Try selecting different presets from the drop-down. When you change the preset, you can see how the overlay picture changes respectively.

5. Select the preset you liked the most.

6. Press record button. The web application will start generating the video and you will see the progress indicator. If you have a long record, the video generation can take a while. The process consumes a lot of RAM, please be prepared.

7. After the overlay is generated it will be downloaded automatically.

8. The downloaded video format is WebM and may not be supported natively on your operating system. You need to convert it. I recommend using ffmpeg (https://ffmpeg.org)

To convert the video, run

ffmpeg -i overlay.webm -crf 1 -vsync 2 overlay.mp4

9. Use a video editor to combine overlay and footage. I will use iMovie

a) Pad overlay to desired resolution (documentation)

ffmpeg -i overlay.webm -crf 1 -vsync 2 -vf "pad=w=1920:h=1080:x=800:y=900:color=green" overlay.mp4

b) Drag both videos to iMovie

c) Drag footage to the timeline, then drag overlay

d) Change overlay settings to `Green/Blue Screen`

e) Save your video and you are done!

EDITING PRESET

1. You can fully customize built-in presets or create your own, change colours, fonts, arragement of elements. Try to keep top element as small as possible. If your top element is too big and the record is too long, the browser will consume a lot of RAM and crash. It is better to generate several small overlays and then combine or pad them with ffmpeg.

2. Every preset uses essential javascript functions

function init(record) {
  // setup your screen, do some preparations
  // set some values that do not change over time
  // use record.wh, record.voltage.length, etc...
}

function update(record, index) {
  // update your texts
  // use record.voltage[index], record.duty[index]
  // or record.current[index] etc...

  // in the end of this function call
  addFrame(elapsed, next);
}

In the init function you can do some preparations, for example loop over record.speed and calculate minimum or maximum values. Or you can use record.latitude and record.longitude to draw route path.

In the update function you change your HTML elements to reflect current realtime data, for example you do

document.getElementById('duty').innerHTML = record.duty[index] + ' %';

to change the duty cycle label. In the end you call addFrame(elapsed, next); where elapsed is the number of milliseconds for current frame and next is a callback that will be called after the frame is added.