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> <html>
<head> <head>
<title>FTMS Rower | Concept</title> <title>FTMS Video Rower | Demo</title>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/main.css">
@ -12,56 +12,65 @@
</head> </head>
<body> <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> <p><button id="bleConnectionButton">Connect FTMS BLE Rower</button></p>
<h2>Training stats</h2> <div class="setupinfo">
<div class="cards"> <h2>Usage information</h2>
<div class="card"> <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>
<div class="name">Pace</div> <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 class="unit" id="avg-pace">0:00</div> </div>
<div class="value" id="pace">0:00</div> <div class="training">
</div> <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="card">
<div class="name">Stroke rate</div> <div class="name">Stroke rate</div>
<div class="unit" id="tot-strokes">0</div> <div class="unit" id="tot-strokes">0</div>
<div class="value" id="stroke-rate">0.0</div> <div class="value" id="stroke-rate">0.0</div>
</div> </div>
<div class="card"> <div class="card">
<div class="name">Power</div> <div class="name">Power</div>
<div class="unit" id="avg-power">0</div> <div class="unit" id="avg-power">0</div>
<div class="value" id="power">0.0</div> <div class="value" id="power">0.0</div>
</div> </div>
<div class="card"> <div class="card">
<div class="name">Distance</div> <div class="name">Distance</div>
<div class="unit">m</div> <div class="unit">m</div>
<div class="value" id="tot-distance">0</div> <div class="value" id="tot-distance">0</div>
</div> </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> </body>
<script> <script>
//navigation menu
//hide player controls in video.js
const player = videojs('rowing_video'); //hide player controls in video.js
player.bigPlayButton.hide(); //just don't show it const player = videojs('rowing_video');
player.controlBar.playToggle.dispose(); //remove completely player.bigPlayButton.hide(); //just don't show it
player.controlBar.progressControl.disable(); //show, but disallow user to use it player.controlBar.playToggle.dispose(); //remove completely
player.controlBar.fullscreenToggle.dispose(); player.controlBar.progressControl.disable(); //show, but disallow user to use it
player.controlBar.pictureInPictureToggle.dispose(); player.controlBar.fullscreenToggle.dispose();
player.controlBar.playbackRateMenuButton.disable(); player.controlBar.pictureInPictureToggle.dispose();
player.controlBar.playbackRateMenuButton.disable();
function handleNotifications(event) { function handleNotifications(event) {
let data = parseRowerData(event.target.value); let data = parseRowerData(event.target.value);
@ -103,7 +112,5 @@ player.controlBar.playbackRateMenuButton.disable();
} }
document.querySelector('#bleConnectionButton').addEventListener('click', what); document.querySelector('#bleConnectionButton').addEventListener('click', what);
</script> </script>
</html> </html>

2
js/ftms-rower.js
View File

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