/
index.html
213 lines (184 loc) · 8.72 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
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>c2log-overlay - Generate movie overlay from Concept2 log file</title>
<script src="./js/jquery-3.4.1.min.js"></script>
<script src="./js/papaparse.min.js"></script>
<script src="./js/moment.js"></script>
<script src="./js/whammy.js"></script>
<script src="./js/app.js"></script>
<style type="text/css">
body {
width: 700px;
margin: auto;
}
.clear {
clear: both;
}
#file-upload, #status {
width: 50%;
float: left;
}
#file-upload p {
margin-top: 0;
}
#dropzone {
background: #ccc;
height: 4.5em;
}
canvas {
}
dt {
font-weight: bold;
}
dd {
margin-bottom: 1em;
}
#demo-movie p {
text-align: center;
font-style: italic;
margin-top: 0;
}
iframe {
width: 100%;
margin: auto;
}
</style>
</head>
<body>
<h1>Concept2 .csv log file overlay maker</h1>
<p>
Quick and dirty application that creates a movie showing pace, stroke
rate and other variables as recorded by ErgData from the monitor of your
Concept2 erg. Suitable for overlaying on a video. (almost) All done in-browser.
</p>
<div id="demo-movie">
<iframe height="315" src="https://www.youtube.com/embed/OQQJrVgl6ys"></iframe>
<p>Quick test showing different stroke rate and pace combinations.</p>
</div>
<!-- loader / uploader -->
<div id="file-upload">
<fieldset>
<legend>File upload</legend>
<div id="dropzone">
<p>Drop a C2 .csv logfile here to convert</p>
</div>
</fieldset>
</div>
<!-- dump debug / log messages -->
<div id="status">
<fieldset>
<legend>Status</legend>
<p></p>
<progress id="progress" value="0" max="60" min="0" style="min-width: 100%;"></progress>
</fieldset>
</div>
<!-- results here -->
<div id="output" class="clear">
<fieldset>
<legend>Output files</legend>
<div id="movies">
</div>
</fieldset>
</div>
<h2>Use cases</h2>
<ul>
<li>Coach wants to provide technique video <strong>and</strong>
show pace / stroke / distance / time information.</li>
<li>Athlete wants to compare old and recent technique sessions
<strong>simultaneously</strong> with pace / stroke / distance
/ time information.</li>
</ul>
<h2>Requires</h2>
<ul>
<li>Chrome web browser (or other Canvas- and WebKit-enabled browser).</li>
<li>A logfile from your <a href="https://log.concept2.com">Concept2 Online logbook</a>
account. Must be uploaded via
<a href="https://www.concept2.com/service/software/ergdata">ErgData</a>.</li>
<li>Optional: A tool to convert <strong>.webm</strong> files to <strong>.mp4</strong> or other
video format. Have a <a href="https://www.google.com/search?q=webm+to+mp4">Google</a>,
or install and learn <a href="https://ffmpeg.org/">ffmpeg</a>.</li>
<li>Optional: video editing tool of your choice.</li>
<li>Optional: video of yourself / athlete rowing or skiing.</li>
</ul>
<h2>Usage</h2>
<ul>
<li><a href="https://www.concept2.com/service/software/ergdata/how-to-use">
Upload a rowing / skiing session using ErgData</a>.</li>
<li>Download that session from the <a href="https://log.concept2.com">logbook</a>
as a <strong>CSV</strong> file (button at the bottom of the page).</li>
<li>Drag and drop that .csv file on the grey rectangle above.</li>
<li>Be patient. Wait until the status says <strong>Movie generation
complete.</strong></li>
<li>Two <i>faux</i>-monitors will appear. Click the three dots from
the one on the right and choose <strong>Download</strong>.</li>
<li>Import that file into your video editing software, or if the format
isn't supported, use your chosen file conversion software to turn
the <strong>.webm</strong> file into a <strong>.mp4</strong> or
similar for your movie software.</li>
<li>Import the resulting video into your video editing software
and go for gold.</li>
</ul>
<h2>FAQ</h2>
<dl>
<dt>How can I see other variables, like average pace?</dt>
<dd>The Concept2 format for .csv is limited to elapsed time, stroke
rate, instantaneous pace, distance, heart rate, watts and
calories per hour.</dd>
<dt>But you can calculate average pace (and others) from those variables!</dt>
<dd>Yup, this is on the list of things to fix.</dd>
<dt>The output video format sucks. Can you change it?</dt>
<dd>Yup, this is on the list of things to fix. If you have suggestions
please pass them along.</dd>
<dt>Why would I use this over <<i>other software</i>>?</dt>
<dd>This handles (almost) everything in-browser. Feel free to use something
else if this doesn't fit your needs.</dd>
<dt>Does this handle intervals?</dt>
<dd>Yup.</dd>
<dt>It generates multiple movies for interval workouts!</dt>
<dd>Yup. The Concept2 .csv format doesn't include rest periods, so
the output movie is split into parts for easier overlaying.</dd>
<dt>Why are there pauses in the movie at the start of each interval?</dt>
<dd>Purely for allowing you to better sync the overlay in your editing
software.</dd>
<dt>Why does this miss the first few and last few seconds of an interval?</dt>
<dd>The data provided on the Concept2 Online logbook for a session appears to
only include data <strong>on the stroke</strong>. This means the
<i>first stroke and the end of the workout</i> are typically missed.</dd>
<dt>The time and distance don't increase smoothly! WTF?!?</dt>
<dd>Yup; as stated above the Online logbook data appears to only include
data <strong>on the stroke</strong>, not between strokes.</dd>
<dt>So any pointers on how to sync this properly over video of me rowing?</dt>
<dd>Yup:
<ul>
<li>The frame where the numbers change from zero should be synced
to match the <i>end of your first (possibly
<strong>second</strong>) actual stroke</i>. This is
because the rower / SkiErg won't necessarily register
your first stroke, espectially if you start
rowing from the main menu screen.</li>
<li>The last frame of numbers should be synced to
match the <i>end of your last actual stroke</i>.</li>
</ul>
Try syncing at the end of the overlay movie first, then lock in the
start stroke. Note that you may need to stretch either your video or
the overlay video to get <i>100% accurate overlay goodness</i>. But
as a savvy video editing connoisseur, you already know that.
</dd>
<dt>This doesn't work on my phone!</dt>
<dd>Not indended for phone use; try a computer instead.</dd>
<dt>This doesn't work on my computer!</dt>
<dd>This application has been tested and works using the latest version
of the <a href="https://chrome.google.com">Chrome web browser</a> on
<a href="https://www.apple.com/au/macos/mojave/">Mac OS X</a>. YMMV on
other platforms.</dd>
<dt>The filenames of the movies are gibberish!</dt>
<dd>Yup, this is on the list of things to fix.</dd>
<dt>This page looks like balls!</dt>
<dd>Yup, this is on the list of things to fix.</dd>
<dt>I want to yell at you! Where do I find you?</dt>
<dd>You can <a href="https://www.reddit.com/user/angrytongan">yell at me here</a>.</dd>
</dd>
</body>
</html>