142 lines
6.7 KiB
HTML
142 lines
6.7 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="icon" href="img/favicon.ico">
|
|
<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>
|
|
<nav class="navbar">
|
|
<div class="logo">
|
|
<img src="img/logo.png" alt="FTMS Video Rower Logo" width="150">
|
|
</div>
|
|
<div class="nav-links">
|
|
<ul>
|
|
<li><a href="index.html">Training</a></li>
|
|
<li><a href="#change-video">Change Video</a></li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
|
|
<p><button id="bleConnectionButton">Connect FTMS BLE Rower</button></p>
|
|
|
|
<div class="setupinfo">
|
|
<h2>Usage information</h2>
|
|
<p>To get started with FTMS Video Rower, follow these simple steps:</p>
|
|
<p><ol class="usage">
|
|
<li><b>Power on your rower:</b> Follow the instructions of your devices manufaturer to power on your traiining device and enabling FTMS service.</li>
|
|
<li><b>Connect your rower:</b> Click the button above to see the list of available rowers. Select your rower from the list of available devices and wait for the connection to establish.</li>
|
|
<li><b>Start your exercise:</b> As you start your exercise, the training video will begin playing, providing real-time guidance and motivation. Meanwhile, your live training statistics will be displayed on your device, tracking your progress and providing valuable insights into your performance.</li>
|
|
<li><b>Training video:</b> The playback speed of the training video will be automatically adjusted to your training performance.</li>
|
|
<li><b>Pause / Resume training:</b> You can pause the training whenever you need, the video will automatically pause too. You can resume anytime, while the training video will continue playing automatically.</li>
|
|
</ol></p>
|
|
<p>By following these steps, you'll be ready to start your exercise and take full advantage of the FTMS rower's advanced features.<br><br></p>
|
|
<h3>Privacy policy</h3>
|
|
<p>At FTMS Video Rower, we are committed to protecting your privacy. This policy explains how we collect, use, and protect your personal data when you visit our website.</p>
|
|
<p>We do not collect or store any personal data, including training data or data from connected Bluetooth FTMS devices. We also do not use cookies to track your activity on our website.</p>
|
|
<p>We only use your data to the extent necessary to provide you with the services and features available on our website. We do not use analytics tools to track your activity or collect data for marketing purposes.</p>
|
|
<p>We take all necessary steps to protect your data, including using secure protocols to protect data in transit and implementing measures to prevent unauthorized access.</p>
|
|
<p>You have the right to request access to the personal data we hold about you, and the right to request that we correct any inaccuracies in that data. If you have any concerns about your privacy or would like to request access to your data, please contact us via our contact form.</p>
|
|
<p><b>By using our website, you consent to the terms of this policy.</b><br><br></p>
|
|
<h3>Contribution and bugs</h3>
|
|
<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> |