diff --git a/app/client/app.js b/app/client/app.js index 2d076d6..d49f7a0 100644 --- a/app/client/app.js +++ b/app/client/app.js @@ -11,15 +11,23 @@ export function createApp () { const fieldFormatter = { peripheralMode: (value) => { if (value === 'PM5') { - return 'Concept2 PM5' + return 'C2 PM5' } else if (value === 'FTMSBIKE') { - return 'FTMS (Bike)' + return 'FTMS Bike' } else { - return 'FTMS (Rower)' + return 'FTMS Rower' } }, distanceTotal: (value) => value >= 10000 ? { value: (value / 1000).toFixed(1), unit: 'km' } : { value, unit: 'm' } } + const standalone = (window.location.hash === '#:standalone:') + + if (standalone) { + document.getElementById('closeButton').style.display = 'inline-block' + } else { + document.getElementById('fullscreenButton').style.display = 'inline-block' + } + let socket initWebsocket() @@ -69,29 +77,29 @@ export function createApp () { } async function requestWakeLock () { - // use the Wake Lock API to prevent the screen from going to standby - if (!('wakeLock' in navigator)) { - console.log('Browser does not support Wake Lock API (or maybe we are not using SSL).' + - 'Now enforcing the screen with a hack, user has to click once for this to work...') - // Chrome enables the new Wake Lock API only if the connection is secured via SSL - // This is quite annoying for IoT use cases like this one, where the device sits on the - // local network and is directly addressed by its IP. - // In this case the only way of using SSL is by creating a self signed certificate, and - // that would pop up different warnings in the browser (and also prevents fullscreen via - // a home screen icon so it can show these warnings). Okay, enough ranting :-) - // In this case we use the good old hacky way of keeping the screen on via a hidden video. - // eslint-disable-next-line no-undef - const noSleep = new NoSleep() - document.addEventListener('click', function enableNoSleep () { - document.removeEventListener('click', enableNoSleep, false) - noSleep.enable() - }, false) - } else { - try { - await navigator.wakeLock.request('screen') - console.log('Wake Lock is active') - } catch (err) { - console.log(err) + // Chrome enables the new Wake Lock API only if the connection is secured via SSL + // This is quite annoying for IoT use cases like this one, where the device sits on the + // local network and is directly addressed by its IP. + // In this case the only way of using SSL is by creating a self signed certificate, and + // that would pop up different warnings in the browser (and also prevents fullscreen via + // a home screen icon so it can show these warnings). Okay, enough ranting :-) + // In this case we use the good old hacky way of keeping the screen on via a hidden video. + // eslint-disable-next-line no-undef + const noSleep = new NoSleep() + checkAlwaysOn() + setInterval(() => { + checkAlwaysOn() + }, 3000) + document.addEventListener('click', function enableNoSleep () { + document.removeEventListener('click', enableNoSleep, false) + noSleep.enable().then(checkAlwaysOn) + }, false) + + function checkAlwaysOn () { + if (noSleep.isEnabled) { + document.getElementById('alwaysOnHint').style.display = 'none' + } else { + document.getElementById('alwaysOnHint').style.display = 'grid' } } } @@ -113,6 +121,10 @@ export function createApp () { } } + function close () { + window.close() + } + function reset () { resetFields() if (socket)socket.send(JSON.stringify({ command: 'reset' })) @@ -125,6 +137,7 @@ export function createApp () { return { toggleFullscreen, reset, + close, switchPeripheralMode } } diff --git a/app/client/index.html b/app/client/index.html index 04296d6..4a82491 100644 --- a/app/client/index.html +++ b/app/client/index.html @@ -72,11 +72,15 @@
- + +
+ diff --git a/app/client/manifest.json b/app/client/manifest.json index fadb63c..e7e9af4 100644 --- a/app/client/manifest.json +++ b/app/client/manifest.json @@ -11,5 +11,6 @@ ], "background_color": "0059B3", "display": "fullscreen", - "orientation": "any" + "orientation": "any", + "start_url": "/#:standalone:" } diff --git a/app/client/style.css b/app/client/style.css index 5993490..a252edd 100644 --- a/app/client/style.css +++ b/app/client/style.css @@ -8,6 +8,7 @@ body { font-size: calc(16px + (60 - 16) * ((100vw - 300px) / (1920 - 300))); font-family: Verdana, "Lucida Sans Unicode", sans-serif; user-select: none; + overscroll-behavior: contain; } .grid { @@ -52,10 +53,30 @@ button { background-color: #00468c; border: 0; color: white; - padding: 1.5vw 2vw; - margin: 1vw; - font-size: 80%; + padding: 1.2vw 1.5vw; + margin: 0.8vw; + font-size: 70%; text-align: center; text-decoration: none; display: inline-block; } + +#fullscreenButton, #closeButton { + display:none; +} + +.popup { + display: none; + position: fixed; + border: solid 0.3vw white; + align-items: center; + justify-content: center; + padding: 10px; + width: 50vw; + height: 10vh; + left: 24vw; + top: 5vw; + background: rgba(80, 0, 0, 0.95); + font-size: 60%; + z-index: 20; +} diff --git a/doc/backlog.md b/doc/backlog.md index b5aec67..4707ef9 100644 --- a/doc/backlog.md +++ b/doc/backlog.md @@ -4,8 +4,6 @@ This is the very minimalistic Backlog for further development of this project. ## Soon -* Web UI: hint, when screen is not in always on mode -* Web UI: replace fullscreen button with exit Button when started from home screen * investigate: occasionally stroke rate is too high - seems to happen after rowing pause * figure out where to set the Service Advertising Data (FTMS.pdf p 15) * investigate bug: crash, when one unsubscribe to BLE "Generic Attribute", probably a bleno bug "handleAttribute.emit is not a function"