started to calibration process

ced370ea · Wasala W.L.M.K.S - IT19177106 · ea56fff4 · ced370ea
Commit ced370ea authored Mar 06, 2022 by Wasala W.L.M.K.S - IT19177106
Hide whitespace changes
Inline Side-by-side

Showing with 91 additions and 0 deletions

frontend/calib.html frontend/calib.html +91 -0

No files found.
--- a/frontend/calib.html
+++ b/frontend/calib.html
+<!DOCTYPE html>
+<html>
+
+<head>
+	<title>Test Game</title>
+	<script src="https://code.jquery.com/jquery-3.6.0.min.js"
+		integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
+	<script src="webgazer.js" type="text/javascript"></script>
+	<style type="text/css">
+		body {
+			background-color: rgb(255, 242, 204);
+		}
+	</style>
+</head>
+
+<body style="margin: 0px; overflow: hidden;">
+
+	<img id="I1" class="calibImg" style="position:absolute; left: 15px; top:10px; " src="images/resize/6- 2.png">
+	<img id="I2" class="calibImg" style="position:absolute; left: 660px; top:10px;display: none;" src="images/resize/20- 2.png">
+	<img id="I3" class="calibImg" style="position:absolute; left: 1250px; top:10px; display: none;" src="images/resize/1- 2.png">
+	<img id="I4" class="calibImg" style="position:absolute; left: 15px; top:350px;display: none; " src="images/resize/19- 2.png">
+	<img id="I5" class="calibImg" style="position:absolute; left: 660px; top:350px;display: none;" src="images/resize/14- 2.png">
+	<img id="I6" class="calibImg" style="position:absolute; left: 1250px; top:350px;display: none;" src="images/resize/12- 2.png">
+	<img id="I7" class="calibImg" style="position:absolute; left: 15px; top:660px;display: none;" src="images/resize/18- 2.png">
+	<img id="I8" class="calibImg" style="position:absolute; left: 660px; top:660px;display: none;" src="images/resize/7- 2.png">
+	<img id="I9" class="calibImg" style="position:absolute; left: 1250px; top:660px;display: none;" src="images/resize/22- 2.png">
+
+	<!-- <img id="calib" class="slide" style="display: block;" src="calibPoints.png"> -->
+	<span
+		style="position: absolute; bottom: 10px; right: 10px; font-size: x-large; color: rgb(255, 230, 255); cursor: default;"
+		onclick="location.href='task1.html'" id="finish">►</span>
+	<script type="text/javascript">
+
+		webgazer.setGazeListener(function (data, elapsedTime) {
+			if (data == null) {
+				$("webgazerVideoContainer").show();
+				return;
+
+			}
+				$("#webgazerVideoContainer").hide();
+			
+		}).begin();
+
+		clickCount = {
+			"I1": 0,
+			"I2": 0,
+			"I3": 0,
+			"I4": 0,
+			"I5": 0,
+			"I6": 0,
+			"I7": 0,
+			"I8": 0,
+			"I9": 0,
+			"total": 0,
+		}
+
+		$(".calibImg").on('click', function (event) {
+			var objectId = event.target.id;
+
+			clickCount[objectId] += 1;
+			if (clickCount[objectId] >= 3) {
+				$("#" + objectId).hide();
+				
+				var currentNumber = Number(objectId.substr(1))
+				if(currentNumber <= 9){
+					currentNumber++;
+					$("#I" + currentNumber).show();
+				}
+			}
+
+			console.log(clickCount);
+			
+			clickCount["total"] += 1;
+			if (clickCount["total"] >= 27) {
+				alert('ක්‍රියාකාරම ආරම්භ කිරීමට "OK" බොත්තම ඔබන්න');
+				location.href='task1.html';
+			}
+
+
+			//(... rest of your JS code)
+		});
+
+		//initialy hide all images
+
+		//kotuwa athulta face eka awama hide wnna dnna
+
+
+	</script>
+</body>
+
+</html>
\ No newline at end of file