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.

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

Components + second api rework #42

Open
wants to merge 12 commits into
base: main
Choose a base branch
from
66 changes: 66 additions & 0 deletions examples/example-components.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
<!DOCTYPE html>
<head>
<meta charset="UTF-8" />
<title>An Eyetracking Experiment</title>
<script src="../dist/bundle.js"></script>
</head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
<body></body>
<script>
/**
* GOALS:
* Display ease of use workflow for the user.
* Create a simple experiment that can be used to test the eyetracker.
* Utilize as many custom variables as possible.
*/
const Eyetracker = eyetrack.initEyetracker();
const comp = eyetrack.initComponents(Eyetracker);

async function start() {
const landing = await comp.createLanding();
document.body.append(landing);
// create a wrapper so that the button doesn't stretch b/c landing is flex
let wrapper = document.createElement("div");
let next = document.createElement("button");
next.innerText = "Next";
// invokes the next step and clears itself
next.addEventListener("click", () => {
next.parentNode.parentNode.remove();
selectorPrompt();
});
wrapper.append(next);
landing.append(wrapper);
}

async function selectorPrompt() {
// giving the html components allows us to modify the style!
const [selector, btn] = await comp.createSelector();
selector.style.margin = "50px";
document.body.append(selector);
btn.style.top = "50px";
document.body.append(btn);

btn.addEventListener("click", () => {
// i'm unsure if setTimeout is necessary
// wanted to make sure the components would clear, THEN calibrate.
setTimeout(async () => {
const div = document.createElement("div");
div.style.width = "100%";
div.style.height = "100%";
div.style.position = "fixed";
div.id = "cal";
document.body.appendChild(div);
await comp.preload();
let ret = await comp.calibrate(div);
console.log(ret);
}, 1000);
});
}

start();
</script>
33 changes: 33 additions & 0 deletions examples/pseudo-components.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
<!DOCTYPE html>
<html>
<head>
<script src="../dist/bundle.js"></script>
</head>
<body></body>
<script>
const Eyetracker = eyetrack.initEyetracker();
const comp = eyetrack.initComponents(Eyetracker);

async function start() {
// deals with all the permissions and camera stuff
await comp.init();

// creates a landing page for the user (disclaimers, stuff like that??)
const landing = comp.landing();
document.body.appendChild(landing);

// all-purpose method for clearing components generated by the Components object
comp.clearComponents();

// generates selector (and handles all the stuff that happens when you select a camera)
const [selector, btn] = await comp.generateSelector();
document.body.appendChild(selector);

// asks the user if camera and facial projection is alright
const [video, canvas] = await comp.generateFeeds();
document.body.appendChild(canvas);
}

start();
</script>
</html>
124 changes: 124 additions & 0 deletions examples/test-components.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,124 @@
<!DOCTYPE html>
<html>
<head>
<script src="../dist/bundle.js"></script>
</head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
<body></body>
<script>
const Eyetracker = eyetrack.initEyetracker();
const comp = eyetrack.initComponents(Eyetracker);

const div = document.createElement("div");
div.style.width = "100%";
div.style.height = "100%";
div.style.position = "fixed";
div.id = "cal";
document.body.appendChild(div);

test(10, 10, div);
test(0, 0, div);

for (let i = 0; i < 10; i++) {
test(Math.random() * 100, Math.random() * 100, div);
}

comp.props.shape = "reticule";
comp.props.diameter = "20px";
comp.props.color = "black";
comp.drawFixation(20, 20, div);

function test(x, y, div) {
const color =
div.parentNode.style.backgroundColor === ""
? "white"
: div.parentNode.style.backgroundColor;

const outerCircle = document.createElement("div");
outerCircle.style.width = "20px";
outerCircle.style.height = "20px";
outerCircle.style.backgroundColor = "green";
outerCircle.style.position = "absolute";
outerCircle.style.left = `calc(${x}% - ${10}px)`;
outerCircle.style.top = `calc(${y}% - ${10}px)`;
outerCircle.style.borderRadius = "50%";
outerCircle.style.zIndex = "1";
div.appendChild(outerCircle);

const blankCross1 = document.createElement("div");
blankCross1.style.width = "5px";
blankCross1.style.height = "20px";
blankCross1.style.backgroundColor = color;
blankCross1.style.position = "absolute";
blankCross1.style.left = `calc(${x}% - ${2.5}px)`;
blankCross1.style.top = `calc(${y}% - ${10}px)`;
blankCross1.style.zIndex = "2";
div.appendChild(blankCross1);

const blankCross2 = document.createElement("div");
blankCross2.style.width = "20px";
blankCross2.style.height = "5px";
blankCross2.style.backgroundColor = color;
blankCross2.style.position = "absolute";
blankCross2.style.left = `calc(${x}% - ${10}px)`;
blankCross2.style.top = `calc(${y}% - ${2.5}px)`;
blankCross2.style.zIndex = "2";
div.appendChild(blankCross2);

const innerCircle = document.createElement("div");
innerCircle.style.width = "10px";
innerCircle.style.height = "10px";
innerCircle.style.backgroundColor = "red";
innerCircle.style.position = "absolute";
innerCircle.style.left = `calc(${x}% - ${5}px)`;
innerCircle.style.top = `calc(${y}% - ${5}px)`;
innerCircle.style.borderRadius = "50%";
innerCircle.style.zIndex = "3";
div.appendChild(innerCircle);
}

// const clearComponentsButton = document.createElement("button");
// clearComponentsButton.textContent = "Next";
// clearComponentsButton.addEventListener("click", () => {
// comp.clearComponents();
// });

// async function start() {
// const landing = await comp.createLanding();
// document.body.append(landing);
// let next = clearComponentsButton;
// next.addEventListener("click", () => {
// selectorPrompt();
// next.remove();
// });
// document.body.append(next);
// }

// async function selectorPrompt() {
// const [selector, btn] = await comp.createSelector();
// document.body.append(selector);
// document.body.append(btn);

// btn.addEventListener("click", () => {
// setTimeout(async () => {
// const div = document.createElement("div");
// div.style.width = "100%";
// div.style.height = "100%";
// div.style.position = "fixed";
// div.id = "cal";
// document.body.appendChild(div);
// await comp.preload();
// let ret = await comp.calibrate(div);
// console.log(ret);
// }, 1000);
// });
// }

//start();
</script>
</html>
Loading