rene/banyaro
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

UX: Routen Standby — Fingerabdruck-Button statt ganzer Bildschirm (SW by-v947)

Browse source
This commit is contained in:
rene 2026-05-14 16:29:09 +02:00
parent 1ea8127aaf
commit 2cf87bab7e
4 changed files with 30 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

40
backend/static/js/pages/routes.js
View file

@ -668,13 +668,25 @@ window.Page_routes = (() => {
<span>·</span>
<span id="rk-rec-dim-dist">0.00 km</span>
</div>
<svg width="56" height="56" viewBox="0 0 56 56" style="margin-top:36px">
<circle cx="28" cy="28" r="24" fill="none" stroke="rgba(255,255,255,.12)" stroke-width="2.5"/>
<circle id="rk-dim-prog" cx="28" cy="28" r="24" fill="none" stroke="rgba(255,255,255,.7)" stroke-width="2.5"
stroke-dasharray="150.8" stroke-dashoffset="150.8" stroke-linecap="round"
transform="rotate(-90 28 28)" style="transition:none"/>
</svg>
<div style="font-size:11px;opacity:.3;margin-top:8px">2 Sek. halten</div>
<button id="rk-dim-unlock-btn"
style="background:none;border:none;cursor:pointer;outline:none;
display:flex;flex-direction:column;align-items:center;gap:0;
margin-top:36px;padding:0;-webkit-tap-highlight-color:transparent;
touch-action:none;user-select:none">
<div style="position:relative;width:56px;height:56px">
<svg width="56" height="56" viewBox="0 0 56 56">
<circle cx="28" cy="28" r="24" fill="none" stroke="rgba(255,255,255,.12)" stroke-width="2.5"/>
<circle id="rk-dim-prog" cx="28" cy="28" r="24" fill="none" stroke="rgba(255,255,255,.7)" stroke-width="2.5"
stroke-dasharray="150.8" stroke-dashoffset="150.8" stroke-linecap="round"
transform="rotate(-90 28 28)" style="transition:none"/>
</svg>
<svg style="position:absolute;inset:0;margin:auto;width:24px;height:24px;opacity:.55"
viewBox="0 0 256 256" aria-hidden="true">
<use href="/icons/phosphor.svg#fingerprint"></use>
</svg>
</div>
<div style="font-size:11px;opacity:.3;margin-top:8px">2 Sek. halten</div>
</button>
</div>
`;
document.body.appendChild(ovl);
@ -789,16 +801,18 @@ window.Page_routes = (() => {
_recOvl.addEventListener('touchstart', _onRecOvlTouch, { passive: true });
_recOvl.addEventListener('pointerdown', _onRecOvlTouch);
// Long-Press auf dem Schwarzbildschirm → nach 4s zurück zur Aufzeichnung
const dim = document.getElementById('rk-rec-dim');
// Long-Press auf Fingerabdruck-Button → nach 2s zurück zur Aufzeichnung
const dim = document.getElementById('rk-rec-dim');
const unlockBtn = document.getElementById('rk-dim-unlock-btn');
let _lpTimer = null;
const cancelLp = () => {
clearTimeout(_lpTimer);
const prog = document.getElementById('rk-dim-prog');
if (prog) { prog.style.transition = 'none'; prog.style.strokeDashoffset = '150.8'; }
};
dim.addEventListener('pointerdown', e => {
unlockBtn.addEventListener('pointerdown', e => {
e.stopPropagation();
unlockBtn.setPointerCapture(e.pointerId);
const prog = document.getElementById('rk-dim-prog');
if (prog) { prog.style.transition = 'stroke-dashoffset 2s linear'; prog.style.strokeDashoffset = '0'; }
_lpTimer = setTimeout(() => {
@ -807,9 +821,9 @@ window.Page_routes = (() => {
_resetRecInactTimer();
}, 2000);
});
dim.addEventListener('pointerup', cancelLp);
dim.addEventListener('pointercancel', cancelLp);
dim.addEventListener('pointerleave', cancelLp);
unlockBtn.addEventListener('pointerup', cancelLp);
unlockBtn.addEventListener('pointercancel', cancelLp);
unlockBtn.addEventListener('pointerleave', cancelLp);
}
function _onRecOvlTouch(e) {