wrong place

.codeclimate.yml

@@ -20,6 +20,7 @@ engines:
 
 exclude_paths:
   - "**/*tipuesearch.js"
+  - "content/assets/scripts/halloween/cv-wasm.js"
 
 ratings:
   paths:

content/assets/scripts/halloween/main.js

@@ -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/images/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);

content/assets/scripts/halloween/wasm-worker.js

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

content/assets/scripts/halloween/worker.js

@@ -0,0 +1,53 @@
+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 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();
+}
+
+self.onmessage = function (e) {
+	switch (e.data.cmd) {
+		case 'faceDetect':
+			faceDetect(e.data.img);
+			break;
+	}
+}
+
+self.onerror = function (e) {
+	console.log(e);
+}

content/assets/stylesheets/includes/cammie.scss

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

content/cammie.erb

@@ -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>
+      <div class="image is-16by9" 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>