-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
145 lines (120 loc) · 6.65 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Erg Arcade - pm5 video overlay</title>
<script src="js/pm5.js"></script>
<script src="js/pm5-printables.js"></script>
<script src="js/p5.min.js"></script>
<script src="js/app.js"></script>
<link rel="stylesheet" href="css/style.css" type="text/css" />
<style>
body {
}
canvas {
border: 1px solid #000;
}
#stopRecord, #downloadLink {
display: none;
}
dt {
font-weight: bold;
width: 700px;
}
dd {
margin-bottom: 1em;
width: 700px;
}
</style>
</head>
<body>
<h1>pm5 video overlay</h1>
<p>
Record a video of a <a href="https://www.concept2.com">Concept2 Ergometer</a> session
overlaid with pace information.
</p>
<hr />
<p>
<button id="connect">Connect to PM5</button>
<button id="startRecord">Start recording</button>
<button id="stopRecord">Stop recording</button>
<a id="downloadLink">Download video</a>
</p>
<div id="sketch-holder"></div>
<hr />
<h2>Sample videos</h2>
<p>A couple of videos from the initial version.</p>
<iframe frameborder="0" scrolling="no" marginheight="0" marginwidth="0"width="393.38" height="221" type="text/html" src="https://www.youtube.com/embed/zsK7ayUt6LQ?autoplay=0&fs=0&iv_load_policy=3&showinfo=0&rel=0&cc_load_policy=0&start=0&end=0&origin=https://youtubeembedcode.com"><div><small><a href="https://youtubeembedcode.com/de/">youtubeembedcode.com/de/</a></small></div><div><small><a href="http://add-link-exchange.com">add-link-Exchange</a></small></div><div><small><a href="https://youtubeembedcode.com/en">youtubeembedcode.com/en/</a></small></div><div><small><a href="http://add-link-exchange.com">add-link-exchange</a></small></div></iframe>
<iframe frameborder="0" scrolling="no" marginheight="0" marginwidth="0"width="393.38" height="221" type="text/html" src="https://www.youtube.com/embed/uxoKK8bDrCM?autoplay=0&fs=0&iv_load_policy=3&showinfo=0&rel=0&cc_load_policy=0&start=0&end=0&origin=https://youtubeembedcode.com"><div><small><a href="https://youtubeembedcode.com/pl/">youtubeembedcode.com/pl/</a></small></div><div><small><a href="http://add-link-exchange.com">add-link-Exchange</a></small></div></iframe>
<h2>Use cases</h2>
<ul>
<li>Coach wants to provide technique video <strong>and</strong>
showing 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><a href="https://www.google.com/chrome">Chrome web browser</a></li>
<li>Laptop / computer with a camera and Bluetooth (not 100% mobile compatible)</li>
<li>PM5-enabled ergometer</li>
<li>Optional: video editing tool of your choice</li>
</ul>
<h2>Usage</h2>
<ul>
<li>Point camera at rower / SkiErg / BikeErg.</li>
<li>Enable Bluetooth (<strong>More Options</strong> > <strong>Turn
Wireless On</strong>) on PM5.</li>
<li>Click <strong>Connect to PM5</strong> above. Wait until
connection is complete. This takes a few seconds; be
patient.</li>
<li>When ready, click <strong>Start recording</strong>.</li>
<li>When you're done, click <strong>Stop recording</strong>.</li>
<li>Download the video by clicking the <strong>Download video</strong> link.</li>
</ul>
<h2>FAQ</h2>
<dl>
<dt>What is the output format for the video?</dt>
<dd><a href="https://www.webmproject.org/about/">.webm</a></dd>
<dt>Does <i><my video editing software></i> work with .webm?</dt>
<dd>Possibly. There are plugins / importers and transcoders available;
check <a href="https://www.google.com">the internet</a>.</dd>
<dt>I don't see any video in the box above!</dt>
<dd>Make sure that you have given permission for this web page to
access your camera. Don't worry, the video is not uploaded anywehere
anywhere and stays only on this page until you decide to download
it to your computer.</dd>
<dt>Does this thing send my video anywhere?</dt>
<dd><strong>No.</strong> All processing occurs on this page in your
browser on your computer. When you download the video, you only
save it as a file on your computer. It goes nowhere else.</dd>
<dt>I don't have any specific video editing software. How do I view the
video after I download it?</dt>
<dd>Drag the video file into an empty browser window and you'll see
it. You can also upload it to media services like <a
href="https://www.youtube.com">YouTube</a>.</dd>
<dt>Does this thing make higher resolution video?</dt>
<dd>Not right now; this is on the list of things to fix.</dd>
<dt>Can I get different statistics on the overlay?</dt>
<dd>Not right now; this is on the list of things to fix.</dd>
<dt>Can I move the statistics overlay around?</dt>
<dd>Not right now; this is on the list of things to fix.</dd>
<dt>This doesn't work on my phone!</dt>
<dd>Not built for phone use; try a computer instead. Should work on
Android; definitely won't work on iOS.</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://www.google.com/chrome">Chrome web
browser</a> on <a href="https://www.apple.com/au/macos/mojave/">Mac OS X</a>. YMMV on other
platforms.
<dt>This page looks like balls!</dt>
<dd>Yup, this is on the list of things to fix.</dd>
<dt>Can I get the source code?</dt>
<dd><a href="https://github.com/ergarcade/pm5-overlay">Sure</a>.</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>
</dl>
</body>
</html>