Webcam_EyeTracker/DispData.html at master · vMyth/Webcam_EyeTracker · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<!doctype html>
<html>

<head></head>

<script type = "text/javascript">
var gazedata = "GazeX,GazeY,HeadX,HeadY,HeadZ,HeadYaw,HeadPitch,HeadRoll,time\n";
var ConnectionAuthorizationStatus;

	function Connect(AppKey = "AppKeyDemo", port = 43333) {

		document.getElementById("status").innerHTML="Connected";

		if ("WebSocket" in window) {
			var url = "ws://127.0.0.1:" + port;
			var ws = new WebSocket(url);

			ws.onopen = function() {
            ws.send(AppKey); // Send appKey
			}

			ws.onerror = function(error) {
						alert("cannot connect to GazePointer server : start GazePointer( http://gazepointer.sourceforge.net ) " );
			}

			ws.onmessage = function(evt) {
				var received_msg = evt.data;
				if (typeof ConnectionAuthorizationStatus === 'undefined') {
					ConnectionAuthorizationStatus = received_msg;
					if (ConnectionAuthorizationStatus.substring(0, 2) !== "ok")
						alert("connection status..." + ConnectionAuthorizationStatus);
				}
				else {
					var GazeData = JSON.parse(received_msg);
					document.getElementById("status").innerHTML="Recieving Data";
					CreateString(GazeData);
				}
			}

			ws.onclose = function() {
				// websocket is closed.
				WriteFile();
				alert("Connection is closed...");
			};
		}
		else {
        // The browser doesn't support WebSocket
        alert("WebSocket NOT supported by your Browser!");
		}
	}

	function CreateString(GazeData){
		var today = new Date();
		var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
		gazedata = gazedata.concat(GazeData.GazeX +","+GazeData.GazeY+","+GazeData.HeadX+","+GazeData.HeadY+","+GazeData.HeadZ+","+GazeData.HeadYaw+","+GazeData.HeadPitch+","+GazeData.HeadRoll+","+time+"\n");
	}
	/*
	function SaveGazeData(GazeData){

		document.getElementById("datas").innerHTML="Called";

		document.getElementById("datas").innerHTML="Doing Shit";

		var table = document.getElementById("DataTable");
		var row = table.insertRow();
		var gazeX = row.insertCell(0);
		var gazeY = row.insertCell(1);
		var headX = row.insertCell(2);
		var headY = row.insertCell(3);
		var headZ = row.insertCell(4);
		var headYaw = row.insertCell(5);
		var headPitch = row.insertCell(6);
		var headRoll = row.insertCell(7);
		var timeStamp = row.insertCell(8);

		var today = new Date();
		var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();


		gazeX.innerHTML = GazeData.GazeX;
		gazeY.innerHTML = GazeData.GazeY;
		headX.innerHTML = GazeData.HeadX;
		headY.innerHTML = GazeData.HeadY;
		headZ.innerHTML = GazeData.HeadZ;
		headYaw.innerHTML = GazeData.HeadYaw;
		headPitch.innerHTML = GazeData.HeadPitch;
		headRoll.innerHTML = GazeData.HeadRoll;
		timeStamp.innerHTML = time;
	}*/
	function WriteFile(){
		//Get filename
		var filename=document.getElementById("sid").value;

		//Write data
		var pom = document.createElement('a');
 		pom.setAttribute('href', 'data:text/plain;charset=utf-8,' +
		encodeURIComponent(gazedata));

 		//Download file
		pom.setAttribute('download',filename);
		pom.style.display = 'inline';
		document.body.appendChild(pom);
		pom.click();
	}

</script>


<body>

<table id = 'DataTable'>
</table>

<p id = 'status'>
Hello. Please enter the subject ID below.
</p>

<form>
Subject Id :
<input type="text" id="sid"><br>
<button type="button" onclick="Connect()">TryIt</button>
</form>

</body>
</html>