Skip to content
This repository was archived by the owner on Mar 6, 2025. It is now read-only.

Commit ad5fbed

Browse files
cvalenzuelacvalenzuela
committed
add gaze receive example
1 parent 66e6ab8 commit ad5fbed

6 files changed

Lines changed: 160 additions & 4 deletions

File tree

‎README.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,8 @@ Examples are separated by current available models.
2020
- [YOLO](/yolo)
2121
- [Receiving data from Runway](/yolo/receivesOnly)
2222
- [Sending live webcam feed](/yolo/sendWebcam)
23+
- [Gaze Detection](/gaze)
24+
- [Receiving data from Runway](/gaze/receivesOnly)
2325

2426
## Library
2527

‎gaze/receivesOnly/index.html‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
<!--
2+
Copyright (C) 2018 Cristobal Valenzuela
3+
4+
This file is part of RunwayML.
5+
6+
RunwayML is free software: you can redistribute it and/or modify
7+
it under the terms of the GNU General Public License as published by
8+
the Free Software Foundation, either version 3 of the License, or
9+
(at your option) any later version.
10+
11+
RunwayML is distributed in the hope that it will be useful,
12+
but WITHOUT ANY WARRANTY; without even the implied warranty of
13+
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
14+
GNU General Public License for more details.
15+
16+
You should have received a copy of the GNU General Public License
17+
along with RunwayML. If not, see <http://www.gnu.org/licenses/>.
18+
19+
-->
20+
21+
<!--
22+
Gaze Tracking: This example receives data from Runway
23+
24+
Cristóbal Valenzuela
25+
Dan Oved
26+
[email protected]
27+
-->
28+
29+
<!DOCTYPE html>
30+
<html lang="en">
31+
32+
<head>
33+
<meta charset="UTF-8">
34+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
35+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
36+
<title>Runway: Gaze Demo</title>
37+
<!-- We are using socket.io to establish a socket connection to Runway -->
38+
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.4/socket.io.js"></script>
39+
<!-- We are using p5.js to draw in the canvas -->
40+
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/p5.min.js"></script>
41+
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/addons/p5.dom.js"></script>
42+
43+
<style>
44+
* {
45+
font-family: Arial, Helvetica, sans-serif;
46+
font-weight: lighter;
47+
}
48+
49+
</style>
50+
</head>
51+
52+
<body>
53+
<!-- Information about the model -->
54+
<div>
55+
<h2>Gaze Demo: receiving data coming from Runway</h2>
56+
<p>About the model: Eye tracking using the first large-scale dataset for eye tracking, containing data from over 1450 people consisting of almost 2.5M frames.</p>
57+
<p>More information: <a href="https://runwayml.com/tutorials/gaze/">https://runwayml.com/tutorials/gaze/</a></p>
58+
<p>This example uses <a href="https://p5js.org/">p5.js</a> to draw body connections</p>
59+
<hr />
60+
</div>
61+
62+
<!-- A log element to show the connection status -->
63+
<div id="status">Not Connected</div>
64+
65+
<script src="script.js"></script>
66+
</body>
67+
68+
</html>

‎gaze/receivesOnly/script.js‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
// Copyright (C) 2018 Cristobal Valenzuela
2+
//
3+
// This file is part of RunwayML.
4+
//
5+
// RunwayML is free software: you can redistribute it and/or modify
6+
// it under the terms of the GNU General Public License as published by
7+
// the Free Software Foundation, either version 3 of the License, or
8+
// (at your option) any later version.
9+
//
10+
// RunwayML is distributed in the hope that it will be useful,
11+
// but WITHOUT ANY WARRANTY; without even the implied warranty of
12+
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
13+
// GNU General Public License for more details.
14+
//
15+
// You should have received a copy of the GNU General Public License
16+
// along with RunwayML. If not, see <http://www.gnu.org/licenses/>.
17+
//
18+
// ===============================================================
19+
//
20+
// Runway: Gaze Demo
21+
// This example receives receives incoming data from Runway.
22+
// p5.js is used to draw the human data sent from Runway
23+
// You should select Camera from the Input Panel
24+
//
25+
// Cristóbal Valenzuela
26+
// Dan Oved
27+
//
28+
// ===============================================================
29+
30+
var capture;
31+
var w = 432;
32+
var h = 368;
33+
var colors;
34+
35+
// This array will get updated with all the gazes detected in the image
36+
var detectedGazes = [];
37+
38+
// Create a connection with Runway
39+
// *You should update this address to match the URL provided by the app
40+
var socket = io.connect('http://127.0.0.1:3333');
41+
42+
// Wait until the page is loaded
43+
document.addEventListener("DOMContentLoaded", function(event) {
44+
// A variable to hold the status of the connection
45+
var status = document.getElementById('status');
46+
47+
// When a connection is established
48+
socket.on('connect', function() {
49+
status.innerHTML = 'Connected';
50+
console.log('connected');
51+
});
52+
53+
// When there is a data event, update the humans array
54+
socket.on('data', function(data) {
55+
detectedGazes = data.results.estimated_gazes;
56+
});
57+
});
58+
59+
// p5 setup function
60+
function setup() {
61+
// Create a canvas
62+
createCanvas(w, h);
63+
// Create a video element.
64+
// Although we are getting the images from Runway, this is just to show the video behind
65+
capture = createCapture(VIDEO);
66+
capture.size(w, h);
67+
// Hide the video element. We will be showing only the canvas
68+
capture.hide();
69+
noStroke();
70+
fill(255, 0, 0);
71+
}
72+
73+
// p5 draw function
74+
function draw() {
75+
// Every frame, draw the current video frame
76+
image(capture, 0, 0, w, h);
77+
// Draw the current detected gazes
78+
detectedGazes.forEach(gaze => drawGaze(gaze));
79+
}
80+
81+
// A function that connects joints based on data coming from OpenPose
82+
function drawGaze(gaze) {
83+
const x = constrain(map(gaze[0], -10, 10, 0, width), 0, width);
84+
const y = constrain(map(gaze[1], -2.5, -20, 0, height), 0, height);
85+
ellipse(x, y, 15, 15);
86+
}

‎openpose/receivesOnly/script.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ var colors;
3434

3535
// This are all the body connections we want to draw
3636
var bodyConnections = [
37-
['Nose', 'Right_Shoulder'],
37+
['Nose', 'Left_Eye'],
3838
['Left_Eye', 'Left_Ear'],
3939
['Nose', 'Right_Eye'],
4040
['Right_Eye', 'Right_Ear'],

‎openpose/sendImage/script.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ var socket;
3535

3636
// This are all the body connections we want to draw
3737
var bodyConnections = [
38-
['Nose', 'Right_Shoulder'],
38+
['Nose', 'Left_Eye'],
3939
['Left_Eye', 'Left_Ear'],
4040
['Nose', 'Right_Eye'],
4141
['Right_Eye', 'Right_Ear'],

‎yolo/receivesOnly/script.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,8 +28,8 @@
2828
// ===============================================================
2929

3030
var capture;
31-
var WIDTH = 432;
32-
var HEIGHT = 368;
31+
var WIDTH = 700;
32+
var HEIGHT = 600;
3333

3434
// All the objects detected with YOLO will be in this results variable
3535
var results = [];

0 commit comments

Comments
 (0)