Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

demo walkthrough, bugs, meta tags #25

Merged
merged 3 commits into from
Aug 14, 2023
Merged

demo walkthrough, bugs, meta tags #25

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
0620b2b
improve demo intro and styling
frankelavsky Aug 14, 2023
8f396e0
add meta info, header image
frankelavsky Aug 14, 2023
76a0ff1
remove comments and logs, fix touch exit command
frankelavsky Aug 14, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion app/static-bundle.js
View file
Open in desktop

Large diffs are not rendered by default.

65 changes: 5 additions & 60 deletions examples/static-app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,25 +7,19 @@ const hideTooltip = () => {
};

const showTooltip = e => {
// console.log('showing tooltip', e);
const tooltip = document.getElementById('tooltip');
tooltip.classList.remove('hidden');
tooltip.innerText = e.semantics.label;
// const xCenter = e.x + e.width/2
const bbox = tooltip.getBoundingClientRect();
const offset = 5 * scale;
const yOffset = bbox.height + offset;
// console.log(e.d.team);
if (!(e.d.team === 'Manchester United' || e.d.team === 'Liverpool' || (!e.d.team && e.d.contest === 'BPL'))) {
tooltip.style.textAlign = 'left';
tooltip.style.transform = `translate(${e.dimensions.x * scale - offset + 1}px,${
e.dimensions.y * scale - yOffset
}px)`;
} else {
tooltip.style.textAlign = 'right';
// console.log(e.x);
// console.log(e.width);
// console.log(e.x + e.width);
const xOffset = bbox.width;
tooltip.style.transform = `translate(${
(e.dimensions.x + e.dimensions.width) * scale + offset - xOffset + 1
Expand Down Expand Up @@ -604,20 +598,15 @@ let edges = {
'any-exit': {
source: () => current,
target: () => {
// console.log("exiting!")
exit();
hideTooltip();
// entered = false;
return '';
},
navigationRules: ['exit']
},
'x_axis-exit': {
source: 'x_axis',
target: () => {
// console.log('exiting!')
exit();
hideTooltip();
return '';
},
navigationRules: ['down']
Expand Down Expand Up @@ -966,34 +955,20 @@ const input = dataNavigator.input({
exitPoint: rendering.exitElement.id
});

// window.dn = {
// structure,
// input,
// rendering
// };

const initiateLifecycle = nextNode => {
// console.log("moving to",nextNode)
const node = rendering.render({
renderId: nextNode.renderId,
datum: nextNode
});
node.addEventListener('keydown', e => {
// myFunction(e) // could run whatever here, of course
const direction = input.keydownValidator(e);
if (direction) {
e.preventDefault();
move(direction);
}
});
node.addEventListener('blur', e => {
entered = false;
// previous = current;
// current = null;
// rendering.remove(previous);
});
showTooltip(nextNode);
input.focus(nextNode.renderId); // actually focuses the element
input.focus(nextNode.renderId);
entered = true;
previous = current;
current = nextNode.id;
Expand All @@ -1003,13 +978,12 @@ const initiateLifecycle = nextNode => {
const enter = () => {
const nextNode = input.enter();
if (nextNode) {
entered = true;
initiateLifecycle(nextNode);
}
};

const move = direction => {
const nextNode = input.move(current, direction); // .moveTo does the same thing but only uses NodeId
const nextNode = input.move(current, direction);
if (nextNode) {
initiateLifecycle(nextNode);
}
Expand All @@ -1018,15 +992,15 @@ const move = direction => {
const exit = () => {
entered = false;
rendering.exitElement.style.display = 'block';
input.focus(rendering.exitElement.id); // actually focuses the element
input.focus(rendering.exitElement.id);
previous = current;
current = null;
rendering.remove(previous);
hideTooltip();
};

const handleMovement = ev => {
const larger = Math.abs(ev.deltaX) > Math.abs(ev.deltaY) ? 'X' : 'Y';
// const smaller = ev.deltaX <= ev.deltaY ? ev.deltaX : ev.deltaY
const ratio =
(Math.abs(ev['delta' + larger]) + 0.000000001) /
(Math.abs(ev['delta' + (larger === 'X' ? 'Y' : 'X')]) + 0.000000001);
Expand Down Expand Up @@ -1064,11 +1038,8 @@ touchHandler.get('rotate').set({ enable: false });
touchHandler.get('pan').set({ enable: false });
touchHandler.get('swipe').set({ direction: Hammer.DIRECTION_ALL, velocity: 0.2 });

touchHandler.on('press', ev => {
// enter()
});
touchHandler.on('press', ev => {});
touchHandler.on('pressup', ev => {
// entered = true;
if (entered) {
exit();
} else {
Expand Down Expand Up @@ -1106,16 +1077,12 @@ const openCam = () => {
document.getElementById('closeWebcam').disabled = false;
document.getElementById('ready').innerText = 'No. Loading video feed...';
handTrack.startVideo(video).then(status => {
// console.log('video started', status);
document.getElementById('ready').innerText = 'Feed ready. Close your hand to prepare for gesture commands.';
if (status) {
// updateNote.innerText = "Video started. Now tracking";
isVideo = true;
document.getElementById('status').classList.remove('hidden');
document.getElementById('canvas').classList.remove('hidden');
runDetection();
} else {
// updateNote.innerText = "Please enable video";
}
});
};
Expand All @@ -1129,7 +1096,6 @@ const runDetection = () => {
frames.push(pred);
} else if (!ready && pred.label === 'closed' && pred.score >= 0.6) {
frames.push(pred);
// console.log("closed...")
}
});
// check when frames >= 30
Expand All @@ -1151,7 +1117,6 @@ const runDetection = () => {
total[3] / frames.length
]);
} else {
// console.log("attempting command...")
// find dominant score, find average center, attempt command
let totals = {};
frames.forEach(frame => {
Expand Down Expand Up @@ -1224,22 +1189,16 @@ const setNotReady = () => {
const attemptCommand = pred => {
if (ready) {
if (pred.label === 'point') {
// console.log('POINT');
const ev = {
deltaX: ready[2] - ready[0] - (pred.bbox[2] - pred.bbox[0]),
deltaY: ready[3] - ready[1] - (pred.bbox[3] - pred.bbox[1])
};
handleMovement(ev);
}
if (pred.label === 'open' && !entered) {
// console.log('GOIN IN!');
// entered = true;
enter();
} else if (pred.label === 'open' && entered) {
exit();
// if (current) {
// move('child');
// }
}
setNotReady();
}
Expand All @@ -1252,7 +1211,6 @@ const loadModel = () => {
handTrack.load(modelParams).then(lmodel => {
// detect objects in the image.
model = lmodel;
// console.log(model);
document.getElementById('openWebcam').disabled = false;
document.getElementById('ready').innerText = 'No. Model loaded but webcam feed required.';
});
Expand All @@ -1263,7 +1221,6 @@ document.getElementById('openWebcam').addEventListener('click', openCam);
document.getElementById('closeWebcam').addEventListener('click', closeCam);

const attemptSubmission = e => {
// console.log('form submission!');
const command = document.getElementById('textCommand').value.toLowerCase();
commandHandler(command);
e.preventDefault();
Expand All @@ -1279,7 +1236,6 @@ const commandHandler = command => {
} else if (command === 'exit' && entered) {
validCommand(command);
exit();
hideTooltip();
} else {
invalidCommand(command);
}
Expand Down Expand Up @@ -1336,8 +1292,6 @@ document.getElementById('enableSpeech').addEventListener('click', enableSpeech);

recognition.onresult = event => {
const command = event.results[0][0].transcript;
// console.log('Result: ' + command);
// console.log('Confidence: ' + event.results[0][0].confidence);
if (+event.results[0][0].confidence >= 0.65) {
commandHandler(command);
} else {
Expand All @@ -1349,16 +1303,7 @@ recognition.onspeechend = function () {
recognition.stop();
};

recognition.onnomatch = function (event) {
// console.log("I didn't recognise that color.");
};

recognition.onerror = function (event) {
// console.log('Error occurred in recognition: ' + event.error);
};

const setGeometryData = () => {
// Haven't resized in 100ms!
const currentWidth = +document.getElementById('chart').getBoundingClientRect().width;
scale = currentWidth / 1200;
const xAdjust = (1200 - currentWidth) / 2;
Expand Down
54 changes: 53 additions & 1 deletion examples/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
body {
font-size: 1.25em;
margin: 0 auto;
max-width: 50em;
max-width: 40em;
padding: 50px;
}

Expand Down Expand Up @@ -122,6 +123,53 @@ img {
display: none;
}

pre {
overflow: auto;
background: #f6f6f6;
padding: 0px 10px;
border-radius: 10px;
}

.bib {
width: 32px;
height: 32px;
border-radius: 16px;
border: 1px dashed black;
cursor: pointer;
}

.bib:hover {
border: 1px solid black;
}

.bib:focus {
border-width: 2px;
}

.bib svg {
width: 16px;
height: 16px;
pointer-events: none;
}

.bib:active path {
fill: #015ee9;
}

.bib path {
fill: #444;
}

#copy-announcer {
font-size: 0.8em;
font-weight: 100;
color: #444;
}

p {
margin-top: 0;
}

.video-wrapper {
position: relative;
}
Expand All @@ -130,6 +178,10 @@ th {
text-align: left;
}

h3 {
margin-bottom: 0.2em;
}

.cell {
padding: 2px 10px 2px 0px;
font-weight: normal;
Expand Down
Loading