-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
109 lines (92 loc) · 3.71 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
<!DOCTYPE html>
<html>
<head>
<title>FTMS Rower | Concept</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/video-js.min.css">
<script src="js/video.min.js"></script>
<script type="text/javascript" src="js/ftms-rower.js"></script>
</head>
<body>
<h1>FTMS Rower | Concept</h1>
<h2>Connect rower</h2>
<p><button id="bleConnectionButton">Connect FTMS BLE Rower</button></p>
<h2>Training stats</h2>
<div class="cards">
<div class="card">
<div class="name">Pace</div>
<div class="unit" id="avg-pace">0:00</div>
<div class="value" id="pace">0:00</div>
</div>
<div class="card">
<div class="name">Stroke rate</div>
<div class="unit" id="tot-strokes">0</div>
<div class="value" id="stroke-rate">0.0</div>
</div>
<div class="card">
<div class="name">Power</div>
<div class="unit" id="avg-power">0</div>
<div class="value" id="power">0.0</div>
</div>
<div class="card">
<div class="name">Distance</div>
<div class="unit">m</div>
<div class="value" id="tot-distance">0</div>
</div>
</div>
<h2>Rowing video</h2>
<video id="rowing_video" class="video-js" controls preload="none" width="640" height="480" poster="video/posters/video.png" data-setup="{}">
<source src="video/video.mp4" type="video/mp4">
<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
</video>
</body>
<script>
//hide player controls in video.js
const player = videojs('rowing_video');
player.bigPlayButton.hide(); //just don't show it
player.controlBar.playToggle.dispose(); //remove completely
player.controlBar.progressControl.disable(); //show, but disallow user to use it
player.controlBar.fullscreenToggle.dispose();
player.controlBar.pictureInPictureToggle.dispose();
player.controlBar.playbackRateMenuButton.disable();
function handleNotifications(event) {
let data = parseRowerData(event.target.value);
if (typeof data['Instantaneous Pace'] != "undefined") {
document.querySelector('#pace').textContent = data['Instantaneous Pace'];
if (data['Instantaneous Pace'] == 0) {
//training has not yet started, or training is paused or stopped
player.pause();
} else {
//training has started or training is in progress
player.play();
}
}
if (typeof data['Average Pace'] != "undefined") {
document.querySelector('#avg-pace').textContent = data['Average Pace'];
}
if (typeof data['Stroke Count'] != "undefined") {
document.querySelector('#tot-strokes').textContent = data['Stroke Count'];
}
if (typeof data['Stroke Rate'] != "undefined") {
document.querySelector('#stroke-rate').textContent = data['Stroke Rate'];
}
if (typeof data['Average Power'] != "undefined") {
document.querySelector('#avg-power').textContent = data['Average Power'];
}
if (typeof data['Instantaneous Power'] != "undefined") {
document.querySelector('#power').textContent = data['Instantaneous Power'];
}
if (typeof data['Total Distance'] != "undefined") {
document.querySelector('#tot-distance').textContent = data['Total Distance'];
}
}
function what() {
connect().then(characteristic =>
characteristic.addEventListener('characteristicvaluechanged', handleNotifications)
)
}
document.querySelector('#bleConnectionButton').addEventListener('click', what);
</script>
</html>