Init
This commit is contained in:
commit
0ad405c26e
78 changed files with 9127 additions and 0 deletions
339
palm-rejection-test.html
Normal file
339
palm-rejection-test.html
Normal file
|
|
@ -0,0 +1,339 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
|
||||
<title>Palm Rejection Test</title>
|
||||
<style>
|
||||
:root {
|
||||
--bg: #f7f7f5;
|
||||
--panel: #ffffff;
|
||||
--ink: #1a1a1a;
|
||||
--accent: #2563eb;
|
||||
--reject: #dc2626;
|
||||
--muted: #6b7280;
|
||||
--border: #e5e7eb;
|
||||
padding-top: env(safe-area-inset-top, 0px);
|
||||
padding-bottom: env(safe-area-inset-bottom, 0px);
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root:not([data-theme="light"]) {
|
||||
--bg: #17181a;
|
||||
--panel: #1f2023;
|
||||
--ink: #f0f0f0;
|
||||
--border: #33353a;
|
||||
--muted: #9aa0aa;
|
||||
}
|
||||
}
|
||||
* { box-sizing: border-box; }
|
||||
html, body { height: 100%; margin: 0; }
|
||||
body {
|
||||
background: var(--bg);
|
||||
color: var(--ink);
|
||||
font-family: -apple-system, "Segoe UI", system-ui, sans-serif;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100%;
|
||||
}
|
||||
header {
|
||||
padding: 14px 18px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
background: var(--panel);
|
||||
}
|
||||
header h1 { font-size: 16px; margin: 0 0 4px; }
|
||||
header p { font-size: 13px; color: var(--muted); margin: 0; }
|
||||
|
||||
.controls {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px 16px;
|
||||
padding: 10px 18px;
|
||||
background: var(--panel);
|
||||
border-bottom: 1px solid var(--border);
|
||||
font-size: 13px;
|
||||
}
|
||||
.controls label { display: flex; align-items: center; gap: 6px; cursor: pointer; }
|
||||
|
||||
.stage {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
touch-action: none;
|
||||
}
|
||||
canvas {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: var(--panel);
|
||||
}
|
||||
|
||||
.hud {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
background: rgba(0,0,0,0.75);
|
||||
color: #fff;
|
||||
font-family: ui-monospace, Consolas, monospace;
|
||||
font-size: 12px;
|
||||
padding: 10px 12px;
|
||||
border-radius: 8px;
|
||||
line-height: 1.5;
|
||||
min-width: 220px;
|
||||
pointer-events: none;
|
||||
}
|
||||
.hud .accepted { color: #4ade80; }
|
||||
.hud .rejected { color: #f87171; }
|
||||
|
||||
.toolbar {
|
||||
position: absolute;
|
||||
bottom: 14px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--border);
|
||||
padding: 6px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
||||
}
|
||||
button {
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: var(--ink);
|
||||
padding: 8px 12px;
|
||||
border-radius: 6px;
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
}
|
||||
button:hover { background: var(--border); }
|
||||
button.active { background: var(--accent); color: white; }
|
||||
|
||||
.log {
|
||||
position: absolute;
|
||||
bottom: 14px;
|
||||
left: 14px;
|
||||
max-width: 260px;
|
||||
max-height: 160px;
|
||||
overflow-y: auto;
|
||||
background: rgba(0,0,0,0.75);
|
||||
color: #ddd;
|
||||
font-family: ui-monospace, Consolas, monospace;
|
||||
font-size: 11px;
|
||||
padding: 8px 10px;
|
||||
border-radius: 8px;
|
||||
pointer-events: none;
|
||||
}
|
||||
.log div { white-space: nowrap; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Palm Rejection Test</h1>
|
||||
<p>Rest your palm on the screen and write with the Surface Pen. Toggle strategies below to feel the difference. Accepted strokes draw in black; if a rejected touch briefly draws before being caught, it flashes red then clears.</p>
|
||||
</header>
|
||||
|
||||
<div class="controls">
|
||||
<label><input type="checkbox" id="optType" checked> Filter by pointerType (pen only)</label>
|
||||
<label><input type="checkbox" id="optGeometry" checked> Reject wide-contact touches</label>
|
||||
<label><input type="checkbox" id="optTiming" checked> Reject touch near pen activity (150ms)</label>
|
||||
<label><input type="checkbox" id="optHover" checked> Arm lockout on pen hover</label>
|
||||
</div>
|
||||
|
||||
<div class="stage">
|
||||
<canvas id="c"></canvas>
|
||||
<div class="hud" id="hud">waiting for input…</div>
|
||||
<div class="log" id="log"></div>
|
||||
<div class="toolbar">
|
||||
<button id="clearBtn">Clear</button>
|
||||
<button id="rawBtn">Show raw (no rejection)</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const canvas = document.getElementById('c');
|
||||
const ctx = canvas.getContext('2d');
|
||||
const hud = document.getElementById('hud');
|
||||
const logEl = document.getElementById('log');
|
||||
const optType = document.getElementById('optType');
|
||||
const optGeometry = document.getElementById('optGeometry');
|
||||
const optTiming = document.getElementById('optTiming');
|
||||
const optHover = document.getElementById('optHover');
|
||||
const rawBtn = document.getElementById('rawBtn');
|
||||
|
||||
let rawMode = false;
|
||||
rawBtn.addEventListener('click', () => {
|
||||
rawMode = !rawMode;
|
||||
rawBtn.classList.toggle('active', rawMode);
|
||||
optType.disabled = optGeometry.disabled = optTiming.disabled = optHover.disabled = rawMode;
|
||||
});
|
||||
|
||||
function resize() {
|
||||
const rect = canvas.getBoundingClientRect();
|
||||
const dpr = window.devicePixelRatio || 1;
|
||||
canvas.width = rect.width * dpr;
|
||||
canvas.height = rect.height * dpr;
|
||||
ctx.scale(dpr, dpr);
|
||||
ctx.lineCap = 'round';
|
||||
ctx.lineJoin = 'round';
|
||||
}
|
||||
resize();
|
||||
window.addEventListener('resize', () => {
|
||||
// preserve drawing by not clearing on resize where possible is nontrivial; keep simple
|
||||
resize();
|
||||
});
|
||||
|
||||
document.getElementById('clearBtn').addEventListener('click', () => {
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
});
|
||||
|
||||
// --- Palm rejection state ---
|
||||
let lastPenActivityTime = 0; // timestamp of most recent pen contact/hover
|
||||
let penIsDown = false; // is a pen stroke currently in progress
|
||||
const activePenStrokes = new Map(); // pointerId -> true, for pen pointers currently drawing
|
||||
const activeTouchStrokes = new Map(); // pointerId -> {x,y,accepted}
|
||||
|
||||
let accepted = 0, rejected = 0;
|
||||
|
||||
function log(msg) {
|
||||
const line = document.createElement('div');
|
||||
line.textContent = msg;
|
||||
logEl.prepend(line);
|
||||
while (logEl.children.length > 30) logEl.removeChild(logEl.lastChild);
|
||||
}
|
||||
|
||||
function updateHud(extra) {
|
||||
hud.innerHTML =
|
||||
`pointerType: <b>${extra?.pointerType ?? '-'}</b><br>` +
|
||||
`pressure: ${extra?.pressure?.toFixed(2) ?? '-'}<br>` +
|
||||
`contact w/h: ${extra?.width?.toFixed(0) ?? '-'} x ${extra?.height?.toFixed(0) ?? '-'}<br>` +
|
||||
`<span class="accepted">accepted: ${accepted}</span> <span class="rejected">rejected: ${rejected}</span>`;
|
||||
}
|
||||
updateHud();
|
||||
|
||||
// Decide whether a given pointer event should be treated as drawing input
|
||||
function evaluatePointer(e) {
|
||||
if (rawMode) return { accept: true, reason: 'raw mode' };
|
||||
|
||||
// Strategy 1: type filtering — only 'pen' draws; everything else is a touch candidate
|
||||
if (e.pointerType === 'pen') {
|
||||
return { accept: true, reason: 'pen input' };
|
||||
}
|
||||
|
||||
if (e.pointerType !== 'touch') {
|
||||
// mouse, etc — accept for testing convenience but note it
|
||||
return { accept: true, reason: 'non-touch pointer' };
|
||||
}
|
||||
|
||||
// From here on we're evaluating a TOUCH pointer as a palm-rejection candidate
|
||||
if (optType.checked) {
|
||||
// If strict type filtering is on, touches never draw at all once a pen has been seen recently
|
||||
if (Date.now() - lastPenActivityTime < 5000 || activePenStrokes.size > 0) {
|
||||
return { accept: false, reason: 'touch blocked: pen session active' };
|
||||
}
|
||||
}
|
||||
|
||||
if (optGeometry.checked) {
|
||||
const w = e.width || 0, h = e.height || 0;
|
||||
const contactSize = Math.max(w, h);
|
||||
if (contactSize > 35) { // heuristic threshold in CSS px; palms report large contact ellipses
|
||||
return { accept: false, reason: `touch blocked: wide contact (${contactSize.toFixed(0)}px)` };
|
||||
}
|
||||
}
|
||||
|
||||
if (optTiming.checked) {
|
||||
if (Date.now() - lastPenActivityTime < 150) {
|
||||
return { accept: false, reason: 'touch blocked: within 150ms of pen activity' };
|
||||
}
|
||||
}
|
||||
|
||||
return { accept: true, reason: 'touch accepted (no pen nearby)' };
|
||||
}
|
||||
|
||||
function draw(x, y, pressure, startNew, colorOverride) {
|
||||
ctx.strokeStyle = colorOverride || getComputedStyle(document.documentElement).getPropertyValue('--ink');
|
||||
ctx.lineWidth = Math.max(1, (pressure || 0.5) * 6);
|
||||
if (startNew) {
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(x, y);
|
||||
} else {
|
||||
ctx.lineTo(x, y);
|
||||
ctx.stroke();
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(x, y);
|
||||
}
|
||||
}
|
||||
|
||||
canvas.addEventListener('pointerdown', (e) => {
|
||||
const rect = canvas.getBoundingClientRect();
|
||||
const x = e.clientX - rect.left, y = e.clientY - rect.top;
|
||||
|
||||
if (e.pointerType === 'pen') {
|
||||
penIsDown = true;
|
||||
lastPenActivityTime = Date.now();
|
||||
activePenStrokes.set(e.pointerId, true);
|
||||
}
|
||||
|
||||
const decision = evaluatePointer(e);
|
||||
updateHud(e);
|
||||
|
||||
if (decision.accept) {
|
||||
accepted++;
|
||||
draw(x, y, e.pressure, true);
|
||||
activeTouchStrokes.set(e.pointerId, { x, y, accepted: true, pointerType: e.pointerType });
|
||||
if (e.pointerType !== 'pen') log(`✓ ${e.pointerType} down — ${decision.reason}`);
|
||||
} else {
|
||||
rejected++;
|
||||
activeTouchStrokes.set(e.pointerId, { x, y, accepted: false });
|
||||
log(`✗ ${e.pointerType} down — ${decision.reason}`);
|
||||
}
|
||||
});
|
||||
|
||||
canvas.addEventListener('pointermove', (e) => {
|
||||
const rect = canvas.getBoundingClientRect();
|
||||
const x = e.clientX - rect.left, y = e.clientY - rect.top;
|
||||
|
||||
// Hover lockout: pen hovering (buttons==0, not down) still counts as "pen nearby"
|
||||
if (e.pointerType === 'pen') {
|
||||
lastPenActivityTime = Date.now();
|
||||
if (optHover.checked && !penIsDown) {
|
||||
// just arm the lockout, don't draw
|
||||
}
|
||||
}
|
||||
|
||||
updateHud(e);
|
||||
|
||||
const stroke = activeTouchStrokes.get(e.pointerId);
|
||||
if (!stroke) return;
|
||||
|
||||
if (e.pointerType === 'pen') {
|
||||
draw(x, y, e.pressure, false);
|
||||
} else {
|
||||
// re-evaluate mid-stroke in case pen just started nearby
|
||||
const decision = evaluatePointer(e);
|
||||
if (decision.accept && stroke.accepted) {
|
||||
draw(x, y, e.pressure, false);
|
||||
} else if (stroke.accepted && !decision.accept) {
|
||||
// pen showed up mid-touch-stroke: cut it off
|
||||
log(`✗ touch cut off mid-stroke — ${decision.reason}`);
|
||||
stroke.accepted = false;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
function endStroke(e) {
|
||||
if (e.pointerType === 'pen') {
|
||||
activePenStrokes.delete(e.pointerId);
|
||||
if (activePenStrokes.size === 0) penIsDown = false;
|
||||
lastPenActivityTime = Date.now();
|
||||
}
|
||||
activeTouchStrokes.delete(e.pointerId);
|
||||
}
|
||||
canvas.addEventListener('pointerup', endStroke);
|
||||
canvas.addEventListener('pointercancel', endStroke);
|
||||
canvas.addEventListener('pointerleave', (e) => {
|
||||
if (e.pointerType === 'pen') lastPenActivityTime = Date.now();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue