midgard/zeus.ugent.be
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

halloween update, add ghosts to cammie 'faces'tm

Browse source
This commit is contained in:
ajuvercr 2018-10-31 15:08:42 +01:00
parent 239421ac94
commit a47001930f
10 changed files with 62262 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
content/assets/scripts/halloween/Ghost.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 25 KiB

51315
content/assets/scripts/halloween/cv-wasm.data Normal file
View file

File diff suppressed because it is too large Load diff

10712
content/assets/scripts/halloween/cv-wasm.js Normal file
View file

File diff suppressed because it is too large Load diff

BIN
content/assets/scripts/halloween/cv-wasm.wasm Normal file
View file

Binary file not shown.

16
content/assets/scripts/halloween/index.html Normal file
View file

@ -0,0 +1,16 @@
<html>
<head>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div style="display: inline-flex">
<img crossorigin="anonymous" id="myImage" SRC='https://kelder.zeus.ugent.be/webcam/video/mjpg.cgi'>
<canvas class="stupid" id="canvas"></canvas>
</div>
<input type="button" id="save" value="Save to PNG">
<script src="https://code.jquery.com/jquery-3.0.0.min.js" charset=utf-8></script>
<script src="./test2.js"></script>
</body>
</html>

77
content/assets/scripts/halloween/main.js Normal file
View file

@ -0,0 +1,77 @@
let wasmWorker = new Worker('../assets/scripts/halloween/wasm-worker.js');
var canvas, ctx, img, pseudoCanvas, pseudoCtx, width, height, checkbox;
var inited = false;
var inited = false;
function init() {
checkbox = document.getElementById("ghosts");
checkbox.onchange = updateGhosts;
canvas = document.getElementById("overlaycanvas");
ctx = canvas.getContext("2d");
img = document.getElementById('cammie-feed');
pseudoCanvas = document.createElement("canvas");
pseudoCtx = pseudoCanvas.getContext("2d");
update_w_h();
}
function updateGhosts() {
if(checkbox.checked) {
update_coolness();
}
}
function update_w_h() {
width = img.width;
height = img.height;
pseudoCanvas.width = width;
pseudoCanvas.height = height;
canvas.width = width;
canvas.height = height;
}
function update_coolness() {
if(!inited) {
init();
inited = true;
}
if(! checkbox.checked) {
if(ctx) {
ctx.clearRect(0,0, width, height);
}
return;
}
pseudoCtx.clearRect(0, 0, width, height);
pseudoCtx.drawImage(img, 0, 0);
let message = { cmd: 'faceDetect', img: pseudoCtx.getImageData(0, 0, width, height) };
wasmWorker.postMessage(message);
};
wasmWorker.onmessage = function (e) {
var img2 = document.createElement("img");
img2.src = "../assets/scripts/halloween/Ghost.jpg";
if(e.data.features) {
ctx.clearRect(0,0, width, height);
// e.data.features.push({x: 10, y: 10, width: 100, height: 100});
for (let i = 0; i < e.data.features.length; i++) {
let rect = e.data.features[i];
ctx.fillStyle = 'rgb(0,0,0)';
ctx.drawImage(img2, rect.x, rect.y, rect.width, rect.height);
}
update_coolness();
}
}
setTimeout(update_coolness, 3000);

5
content/assets/scripts/halloween/wasm-worker.js Normal file
View file

@ -0,0 +1,5 @@
var Module = {};
Module['onRuntimeInitialized'] = function() {
postMessage({msg: 'wasm'});
}
importScripts('cv-wasm.js', 'worker.js');

123
content/assets/scripts/halloween/worker.js Normal file
View file

@ -0,0 +1,123 @@
var face_cascade, eye_cascade;
function loadFaceDetectTrainingSet() {
if (face_cascade == undefined) {
face_cascade = new cv.CascadeClassifier();
let load = face_cascade.load('../../test/data/haarcascade_frontalface_default.xml');
// console.log('load face detection training data', load);
}
}
function loadEyesDetectTrainingSet() {
if (eye_cascade == undefined) {
eye_cascade = new cv.CascadeClassifier();
let load = eye_cascade.load('../../test/data/haarcascade_eye.xml');
// console.log('load eye detection training data', load);
}
}
function faceDetect(imageData) {
loadFaceDetectTrainingSet();
let img = cv.matFromArray(imageData, 24); // 24 for rgba
let img_gray = new cv.Mat();
cv.cvtColor(img, img_gray, cv.ColorConversionCodes.COLOR_RGBA2GRAY.value, 0);
let faces = new cv.RectVector();
let s1 = [0, 0];
let s2 = [0, 0];
face_cascade.detectMultiScale(img_gray, faces, 1.1, 3, 0, s1, s2);
let rects = [];
for (let i = 0; i < faces.size(); i += 1) {
let faceRect = faces.get(i);
rects.push({
x: faceRect.x,
y: faceRect.y,
width: faceRect.width,
height: faceRect.height
});
}
postMessage({ features: rects, output: true });
img.delete();
faces.delete();
img_gray.delete();
}
function eyesDetect(imageData) {
loadFaceDetectTrainingSet();
loadEyesDetectTrainingSet();
let img = cv.matFromArray(imageData, 24); // 24 for rgba
let img_gray = new cv.Mat();
cv.cvtColor(img, img_gray, cv.ColorConversionCodes.COLOR_RGBA2GRAY.value, 0);
let faces = new cv.RectVector();
let s1 = [0, 0];
let s2 = [0, 0];
face_cascade.detectMultiScale(img_gray, faces, 1.1, 3, 0, s1, s2);
let rects = [];
for (let i = 0; i < faces.size(); i += 1) {
let faceRect = faces.get(i);
let x = faceRect.x;
let y = faceRect.y;
let w = faceRect.width;
let h = faceRect.height;
rects.push({
x: x,
y: y,
width: w,
height: h
});
let roiRect = new cv.Rect(x, y, w, h);
let roi_gray = img_gray.getROI_Rect(roiRect);
let eyes = new cv.RectVector();
eye_cascade.detectMultiScale(roi_gray, eyes, 1.1, 3, 0, s1, s2);
for (let j = 0; j < eyes.size(); j += 1) {
let eyeRect = eyes.get(j);
rects.push({
x: x + eyeRect.x,
y: y + eyeRect.y,
width: eyeRect.width,
height: eyeRect.height
});
}
eyes.delete();
roi_gray.delete();
}
postMessage({ features: rects });
img.delete();
faces.delete();
img_gray.delete();
}
self.onmessage = function (e) {
switch (e.data.cmd) {
case 'faceDetect':
faceDetect(e.data.img);
break;
case 'eyesDetect': {
eyesDetect(e.data.img);
break;
}
}
}
self.onerror = function (e) {
console.log(e);
}

8
content/assets/stylesheets/includes/cammie.scss
View file

@ -65,5 +65,11 @@
color: #363636;
}
}
}
.overlay {
position: relative;
left: 0;
top: 0;
transform: translateX(-100%);
}

9
content/cammie.erb
View file

@ -10,8 +10,11 @@ title: Cammie
<section id="cammie-section">
<div id="cammie-body">
<figure class="image is-16by9">
<img id="cammie-feed" alt="cammie" src="https://kelder.zeus.ugent.be/webcam/video/mjpg.cgi?profileid=2">
<figure class="image">
<div style="display: inline-flex">
<img crossorigin="anonymous" id="cammie-feed" alt="cammie" src="https://kelder.zeus.ugent.be/webcam/video/mjpg.cgi?profileid=2">
<canvas class="overlay" id="overlaycanvas"></canvas>
</div>
</figure>
<div id="cammie-ctrls">
<div class="columns is-mobile">
@ -51,6 +54,7 @@ title: Cammie
</div>
</div>
</div>
<input id="ghosts" type="checkbox" name="ghosts" value="ghosts" checked="true"> Display Ghosts <br>
<nav class="nav columns">
<div class="column">
<button class="button ctrl" data-command="set_pos" data-x="16" data-y="16">
@ -80,3 +84,4 @@ title: Cammie
</div>
<div>
</section>
<script src="../assets/scripts/halloween/main.js" charset="utf-8"></script>