Skip to content

Commit

Permalink
Increase sequence, randomize sequence, improve styling, remove tweaki…
Browse files Browse the repository at this point in the history 
…ng from validation
  • Loading branch information
@catherinekago
catherinekago committed Jul 3, 2021
1 parent 391fcbf commit 95cff27
Show file tree
Hide file tree
Showing 6 changed files with 68 additions and 52 deletions.
1 change: 0 additions & 1 deletion public/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@
</head>

<body>
<h1>SurvEye</h1>
<div id="root"></div>
</body>

Expand Down
2 changes: 1 addition & 1 deletion src/App.css
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@

.App {
margin-top: 40px;
margin-top: 0;
background-color: white;
height:inherit;

Expand Down
64 changes: 40 additions & 24 deletions src/Calibration.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,27 +21,30 @@ const Calibration = (props) => {

const pointReference = "calibrationPoint";
const pointWidth = 50 + 50 // margin of point
const headerHeight = 0;
const calibrationWindowMarginBottom = 80;

const [introHeader, setIntroHeader] = useState("Welcome to SurvEye!");
const [introText, setIntroText] = useState("To complete the calibration process, please follow the dot. 🟣")



// Absolute positions of all points
const pointPositions = [
{ x: window.innerWidth / 2 - 0.5 * pointWidth, y: window.innerHeight / 3 - headerHeight },
{ x: 0, y: headerHeight },
{ x: window.innerWidth / 2 - 0.5 * pointWidth, y: headerHeight },
{ x: window.innerWidth - pointWidth, y: headerHeight },
{ x: 0, y: window.innerHeight / 3 },
{ x: window.innerWidth / 2 - 0.5 * pointWidth, y: window.innerHeight / 3 },
{ x: window.innerWidth - pointWidth, y: window.innerHeight / 3 },
{ x: 0, y: window.innerHeight / 3 + window.innerHeight / 3 },
{ x: window.innerWidth / 2 - 0.5 * pointWidth, y: window.innerHeight / 3 + window.innerHeight / 3 },
{ x: window.innerWidth - pointWidth, y: window.innerHeight / 3 + window.innerHeight / 3 },
{ x: window.innerWidth / 2 - 0.5 * pointWidth, y: window.innerHeight / 3 - headerHeight }];
const [pointPositions, setPointPositions] = useState([
{ x: 0, y: 0 },
{ x: window.innerWidth * 0.25 - 0.5 * pointWidth, y: 0 },
{ x: window.innerWidth * 0.5 - 0.5 * pointWidth, y: 0 },
{ x: window.innerWidth * 0.75 - 0.5 * pointWidth, y: 0 },
{ x: window.innerWidth - pointWidth, y: 0},
{ x: 0, y: window.innerHeight / 2 },
{ x: window.innerWidth * 0.25 - 0.5 * pointWidth, y: window.innerHeight / 2 - 0.5 * pointWidth },
{ x: window.innerWidth * 0.5 - 0.5 * pointWidth, y: window.innerHeight / 2 - 0.5 * pointWidth},
{ x: window.innerWidth * 0.75 - 0.5 * pointWidth, y: window.innerHeight / 2 - 0.5 * pointWidth},
{ x: window.innerWidth - pointWidth, y: window.innerHeight / 2 - 0.5 * pointWidth},
{ x: 0, y: window.innerHeight / 2 - 0.5 * pointWidth},
{ x: window.innerWidth * 0.25 - 0.5 * pointWidth, y: window.innerHeight - pointWidth},
{ x: window.innerWidth * 0.5 - 0.5 * pointWidth, y: window.innerHeight - pointWidth},
{ x: window.innerWidth * 0.75 - 0.5 * pointWidth, y: window.innerHeight - pointWidth},
{ x: window.innerWidth - pointWidth, y: window.innerHeight - pointWidth},
]);

// To allow timing length of phases, length of start sequence, and intervals of actions
const [lastMovementTime, setLastMovementTime] = useState(new Date().getTime());
Expand All @@ -66,6 +69,16 @@ const Calibration = (props) => {

});

const randomizePointPositions = (array) => {
let newArray = array;
for (var i = newArray.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
var temp = newArray[i];
newArray[i] = newArray[j];
newArray[j] = temp;
}
return newArray;
}

// Perform click calibration cycle for all given points.
const performCycle = (type) => {
Expand All @@ -79,23 +92,25 @@ const Calibration = (props) => {

// Check if new action (click or check) has to be taken
if (type === "CALIBRATION") {
console.log(pointPositions[currentPoint]);
clickOnPoint();
} else if (type === "VALIDATION") {
handleGazeValidation();
}


}
}

// Start cycle
const startRound = (type) => {
let currentTime = new Date().getTime();
if (currentTime - lastMovementTime >= introTime) {
setPointPositions(randomizePointPositions(pointPositions));
setLastMovementTime(currentTime);
setCurrentPhase(type);
setHasRoundStarted(true);
}


}


Expand All @@ -121,7 +136,7 @@ const Calibration = (props) => {
let result = Math.round(validationTotal / pointPositions.length);
setValidationTotal(Math.round(validationTotal / pointPositions.length));
setIntroHeader("You did it! 🎉");
setIntroText("Your (tweaked) validation result is: " + result + "%");
setIntroText("Your validation result is: " + result + "%");
}
setCurrentPhase("INACTIVE");

Expand All @@ -145,7 +160,7 @@ const Calibration = (props) => {
let currentTime = new Date().getTime();
if (isTransitionOver && currentTime - lastActionTime >= actionInterval) {
setLastActionTime(currentTime);
let calibrationPoint = document.getElementById("calibrationPoint");
let calibrationPoint = document.getElementById("calibrationPointCenter");
let pointXCenter = calibrationPoint.getBoundingClientRect().left + calibrationPoint.getBoundingClientRect().width * 0.5;
let pointYCenter = calibrationPoint.getBoundingClientRect().top + calibrationPoint.getBoundingClientRect().width * 0.5;
click(pointXCenter, pointYCenter);
Expand Down Expand Up @@ -174,7 +189,6 @@ const Calibration = (props) => {
if (isTransitionOver && currentTime - lastActionTime >= actionInterval) {
setLastActionTime(currentTime);
if (isGazeWithinPoint()) {
clickOnPoint();
setCurrentValidationResult(currentValidationResult + 1);
}
console.log("validated");
Expand Down Expand Up @@ -203,11 +217,11 @@ const Calibration = (props) => {

const determineIntroColor = () => {
if (!calibrationComplete) {
return "#4d194d";
return "#28666e";
} else if (!validationComplete) {
return "#006466";
return "#28666e";
} else {
return "#272640";
return "#28666e";
}
}

Expand All @@ -216,8 +230,10 @@ return (

<div style={{
display: hasRoundStarted ? "block" : "flex",
"marginBottom": calibrationWindowMarginBottom,
height: "80vh",
"marginBottom": 0,
"marginTop": 0,
height: window.innerHeight,

}}>
<CalibrationPoint
id={pointReference}
Expand Down
22 changes: 15 additions & 7 deletions src/CalibrationPoint.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,19 +5,27 @@ import './calibrationpoint.css';

const CalibrationPoint = (props) => {

let display = props.phase === "INACTIVE" ? "none" : "block";
let display = props.phase === "INACTIVE" ? "none" : "flex";
const reference = useRef(props.reference);

return (
<WebGazeContext.Consumer>
{context => (
<button id= "calibrationPoint" style={{
display: display,
margin:"25px",
position: "absolute",
transform: "translate(" + props.position.x +"px," + props.position.y + "px)"
<div style = {{
display: display,
margin:"25px",
position: "absolute",
alignContent: "center",
justifyContent: "center",
transform: "translate(" + props.position.x +"px," + props.position.y + "px)"}}
className={props.phase}
id= {props.reference}
ref={reference}
>
<button id="calibrationPointCenter"></button>
</div>


}} ref={reference} className={props.phase}></button>
)}

</WebGazeContext.Consumer>
Expand Down
23 changes: 12 additions & 11 deletions src/calibrationpoint.css
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,22 @@
button {
#calibrationPoint {
height: 50px;
width: 50px;
border-radius: 50%;
border: none;
align-self: center;
transition-duration: 2s;
}

.CALIBRATION{
background-color: #4d194d !important;
transform: 2s;
}

.VALIDATION {
background-color: #006466 !important;
transition-duration: 1s;
background-color: #7c9885 !important;
}

.INACTIVE {
display:none;
}

#calibrationPointCenter {
background-color: #000000 !important;
height: 10px;
width: 10px;
border-radius: 50%;
border: none;
align-self: center;
}
8 changes: 0 additions & 8 deletions src/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,14 +9,6 @@ body {
overflow: hidden;
}

h1 {
text-align: center;
padding-top: 40px;
margin-block-start: 0em;
margin-block-end: 0em;
color: white;
font-size: 60px;
}

code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
Expand Down

0 comments on commit 95cff27

Please sign in to comment.