kamp/FTMS-Rower
1
0
Fork 0
Code Issues Pull Requests Activity

some small improvements to make the ui better for testing

Browse Source 
Signed-off-by: Manuel <manuel@kmpr.at>
This commit is contained in:
Manuel Kamper 2024-11-01 09:44:05 +01:00
parent 2bacace72f
commit 8e15edf239
3 changed files with 51 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
img/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 316 KiB

91
index.html
View File

@ -2,7 +2,7 @@
<html>
<head>
<title>FTMS Rower | Concept</title>
<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">
@ -12,56 +12,65 @@
</head>
<body>
<h1>FTMS Rower | Concept</h1>
<h2>Connect rower</h2>
<h1>FTMS Video Rower | Demo</h1>
<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="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">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">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>
<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>
<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>&copy; 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();
//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);
@ -103,7 +112,5 @@ player.controlBar.playbackRateMenuButton.disable();
}
document.querySelector('#bleConnectionButton').addEventListener('click', what);
</script>
</html>

2
js/ftms-rower.js
View File

@ -26,6 +26,8 @@ function connect() {
.then(characteristic => {
characteristic.startNotifications().then(_ => {
console.log('> Notifications started');
document.querySelector(".setupinfo").style.display="none";
document.querySelector(".training").style.display="block";
});
return characteristic;
})