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

more or less fullscreen video; connect button hidden once connected

Browse Source 
Signed-off-by: Manuel <manuel@kmpr.at>
This commit is contained in:
Manuel Kamper 2024-11-01 13:28:25 +01:00
parent 16a5626c7c
commit 33cd8a51a5
4 changed files with 25 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
css/main.css
View File

@ -184,4 +184,15 @@ footer a:hover {
.video-js.vjs-has-started .vjs-tech {
pointer-events: none;
}
.video-container {
width: 100%;
height: 80vh;
position: relative;
}
.video-js {
width: 100% !important;
height: 100% !important;
}

4
docs/PoC.md
View File

@ -73,11 +73,11 @@ Stay tuned for further updates...
* maybe if training is paused, show an overlay with "PAUSED" and a button to manually stop the training
* think of the basic concept and try out a way to calculate video playback speed based on live training data and then adjust video playback accordingly
* testing phase, including error handlings etc. - hopefully with more people than myself :)
* better ui - thinking of a fullscreen video with overlays of live training data
* better ui - thinking ~~of a fullscreen video~~ with overlays of live training data
* ~~add favicon~~
* ~~add a top navigation bar with settings menu (maybe to select other videos and later on also to log in etc) and a logo~~
* ~~then remove h1 title~~
* hide connect button, once connected and just show the connected device in top navbar
* ~~hide connect button, once connected~~ and just show the connected device in top navbar
* remove volume from video.js and add a mute-button in top navbar
* add a progress bar to the video, which shows the percentage of the training video done
* remove the progress bar of video.js

16
index.html
View File

@ -25,7 +25,9 @@
</div>
</nav>
<button id="bleConnectionButton">Connect FTMS BLE Rower</button>
<div class="btButton">
<button id="bleConnectionButton">Connect FTMS BLE Rower</button>
</div>
<div class="setupinfo">
<h2>Usage information</h2>
@ -74,11 +76,13 @@
<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 class="video-container">
<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>
</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>

3
js/ftms-rower.js
View File

@ -13,7 +13,7 @@ function connect() {
})
.then(device => {
// Human-readable name of the device.
console.log('Device name: '.device.name);
console.log('Device name: ' + device.name);
console.log('Connecting to GATT Server...');
return device.gatt.connect();
})
@ -28,6 +28,7 @@ function connect() {
.then(characteristic => {
characteristic.startNotifications().then(_ => {
console.log('> Notifications started');
document.querySelector(".btButton").style.display="none"; //todo show device name div instead (and later on add reconnect button if connection fails)
document.querySelector(".setupinfo").style.display="none";
document.querySelector(".training").style.display="block";
});