116 lines
4.2 KiB
HTML
116 lines
4.2 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<title>FTMS Video Rower | Demo</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 Video Rower | Demo</h1>
|
|
|
|
<p><button id="bleConnectionButton">Connect FTMS BLE Rower</button></p>
|
|
|
|
<div class="setupinfo">
|
|
<h2>Usage information</h2>
|
|
<p>Connect your rower via bluetooth using the button above. Once connected, it will show your live training stats and the training video here.<br><br></p>
|
|
<p>If you found a bug, or want to contribute to this open source project, visit us at <a href="https://git.kmpr.at/FTMS-Rower" target="_blank">https://git.kmpr.at/FTMS-Rower</a>
|
|
</div>
|
|
<div class="training">
|
|
<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>
|
|
|
|
<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>
|
|
</div>
|
|
<footer>
|
|
<p>© 2024 by <a href="https://www.kmpr.at" target="_blank">Manuel Kamper - kmpr.at</a> | Git: <a href="https://git.kmpr.at/FTMS-Rower" target="_blank">https://git.kmpr.at/FTMS-Rower</a></p>
|
|
</footer>
|
|
</body>
|
|
|
|
<script>
|
|
//navigation menu
|
|
|
|
|
|
//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> |