2024-10-31 14:18:01 +01:00
<!DOCTYPE html>
< html >
< head >
< title > Concept FTMS Rower Console< / title >
< meta charset = "utf-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
2024-10-31 14:29:04 +01:00
< link rel = "stylesheet" href = "css/main.css" >
2024-10-31 14:42:51 +01:00
< link rel = "stylesheet" href = "css/video-js.min.css" >
< script src = "js/video.min.js" > < / script >
2024-10-31 14:18:01 +01:00
< script type = "text/javascript" src = "js/ftms-rower.js" > < / script >
< / head >
< body >
< h1 > FTMS BLE Rower Display< / h1 >
< h2 > Connect< / h2 >
< p > < button id = "bleConnectionButton" > Connect FTMS BLE Rower< / button > < / p >
2024-10-31 14:42:51 +01:00
< h2 > Training stats< / h2 >
2024-10-31 14:18:01 +01:00
< 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 >
2024-10-31 14:42:51 +01:00
< h2 > Rowing video< / h2 >
2024-10-31 15:16:32 +01:00
< video id = "rowing_video_1" class = "video-js" controls preload = "none" width = "640" height = "480" poster = "video/posters/video.png" data-setup = "{}" >
2024-10-31 14:42:51 +01:00
< 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 >
2024-10-31 14:18:01 +01:00
< / body >
< script >
function handleNotifications(event) {
let data = parseRowerData(event.target.value);
if (typeof data['Instantaneous Pace'] != "undefined") {
document.querySelector('#pace').textContent = data['Instantaneous Pace'];
}
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 >
