Commit 0179cf31 authored by Michael Murtaugh's avatar Michael Murtaugh

camera and collage

parent 7f545879
......@@ -3,11 +3,11 @@
<head>
<meta charset="utf-8">
<title>SICV: camera</title>
<link rel="stylesheet" href="client.css">
<link rel="stylesheet" href="styles.css">
<script src="lib/d3.min.js"></script>
<script src="lib/socket.io.js"></script>
<script src="lib/collagecode.js"></script>
<script src="client.js"></script>
<script src="camera.js"></script>
</head>
<body></body>
</html>
document.addEventListener("DOMContentLoaded", function () {
var FONT = "Logisoso",
STATIC_BASE = "";
/* CAMERA */
function imageloop (redraw) {
var that = {},
......@@ -144,10 +143,7 @@ document.addEventListener("DOMContentLoaded", function () {
var stripurlpat = new RegExp("^https?://.+?/(.*)$");
function urltopath (url) {
var m = stripurlpat.exec(url);
if (m !== null) {
console.log("urltopath", m)
return m[1];
}
if (m !== null) { return m[1]; }
return url;
}
......@@ -175,27 +171,37 @@ document.addEventListener("DOMContentLoaded", function () {
var image2screen;
function fillTextC(ctx, msg) {
var text = ctx.measureText(msg),
size = parseInt(ctx.font);
ctx.fillText(msg, (ctx.canvas.width-text.width)/2, (ctx.canvas.height-size)/2);
}
function draw () {
ctx.clearRect(0, 0, canvas.width, canvas.height);
if (state == STATE_COUNTDOWN) {
ctx.font = "200px "+FONT;
var msg = "Log "+countdown_time;
var text = ctx.measureText(msg);
ctx.font = "600px "+FONT;
var msg = ""+countdown_time;
// var text = ctx.measureText(msg);
ctx.fillStyle = "red";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.textBaseline = "hanging";
ctx.fillStyle = "black";
ctx.fillText(msg, (canvas.width-text.width)/2, (canvas.height-200)/2);
fillTextC(ctx, msg);
// ctx.fillText(msg, (canvas.width-text.width)/2, (canvas.height-200)/2);
} else if (state == STATE_RECORDING) {
loop.draw(ctx);
var fs = 50;
ctx.font = fs+"px "+FONT;
var msg = "RECORDING";
var text = ctx.measureText(msg);
ctx.textBaseline = "hanging";
ctx.fillStyle = "red";
ctx.fillText(msg, (canvas.width-text.width)/2, (canvas.height-fs)/2);
fillTextC(ctx, msg);
var i = loop.index();
ctx.fillStyle="black";
ctx.fillText("IMAGE "+i, 0, 0);
if (loop.index() == 29) {
image2screen = cc.transform_from(
......@@ -220,19 +226,29 @@ document.addEventListener("DOMContentLoaded", function () {
var i = loop.index(),
f = faces[i];
// draw FACES
ctx.fillStyle="black";
ctx.fillText("IMAGE "+i, 0, 0);
// draw/emit FACES
if (f && f.faces) {
ctx.strokeStyle = "blue";
ctx.lineWidth = 3;
f.faces.forEach(function (x) {
var r = image2screen(cc.rect(x[0], x[1], x[2], x[3]));
ctx.strokeRect(r.x, r.y, r.width, r.height);
var im_rect = cc.rect(x[0], x[1], x[2], x[3]),
sr = image2screen(im_rect),
face = ctx.getImageData(sr.x, sr.y, sr.width, sr.height);
socket.emit("bcast", { msg: "face", src: urltopath(loop.current_image().src), rect: im_rect });
ctx.strokeRect(sr.x, sr.y, sr.width, sr.height);
// console.log("draw", x);
});
ctx.strokeStyle = "green";
f.eyes.forEach(function (x) {
var r = image2screen(cc.rect(x[0], x[1], x[2], x[3]));
ctx.strokeRect(r.x, r.y, r.width, r.height);
var im_rect = cc.rect(x[0], x[1], x[2], x[3]),
sr = image2screen(im_rect);
socket.emit("bcast", { msg: "eye", src: urltopath(loop.current_image().src), rect: im_rect });
ctx.strokeRect(sr.x, sr.y, sr.width, sr.height);
})
}
......@@ -245,14 +261,19 @@ document.addEventListener("DOMContentLoaded", function () {
ctx.strokeStyle = "blue";
ctx.lineWidth = 3;
f.faces.forEach(function (x) {
var r = image2screen(cc.rect(x[0], x[1], x[2], x[3]));
ctx.strokeRect(r.x, r.y, r.width, r.height);
var im_rect = cc.rect(x[0], x[1], x[2], x[3]),
sr = image2screen(im_rect),
face = ctx.getImageData(sr.x, sr.y, sr.width, sr.height);
socket.emit("bcast", { msg: "face", src: urltopath(loop.current_image().src), rect: im_rect });
ctx.strokeRect(sr.x, sr.y, sr.width, sr.height);
// console.log("draw", x);
});
ctx.strokeStyle = "green";
f.eyes.forEach(function (x) {
var r = image2screen(cc.rect(x[0], x[1], x[2], x[3]));
ctx.strokeRect(r.x, r.y, r.width, r.height);
var im_rect = cc.rect(x[0], x[1], x[2], x[3]),
sr = image2screen(im_rect);
socket.emit("bcast", { msg: "eye", src: urltopath(loop.current_image().src), rect: im_rect });
ctx.strokeRect(sr.x, sr.y, sr.width, sr.height);
})
......@@ -303,5 +324,11 @@ document.addEventListener("DOMContentLoaded", function () {
record();
}
}
countdown();
window.requestAnimationFrame(draw);
window.setTimeout(countdown, 1000);
window.addEventListener("resize", function () {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
})
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>SICV: collage</title>
<link rel="stylesheet" href="styles.css">
<script src="lib/d3.min.js"></script>
<script src="lib/socket.io.js"></script>
<script src="lib/collagecode.js"></script>
<script src="collage.js"></script>
</head>
<body><div id="content"><canvas id="canvas"></canvas></div></body>
</html>
document.addEventListener("DOMContentLoaded", function () {
var FONT = "Logisoso",
STATIC_BASE = "";
var sockaddr = window.location.protocol+'//'+window.location.host,
socket;
console.log("opening connection to", sockaddr);
socket = io.connect();
socket.on("connect", function (data) {
console.log("connected");
});
function randint(a, b) {
return a + Math.floor(Math.random() * (b-a));
}
var canvas = document.getElementById("canvas"),
ctx = canvas.getContext("2d");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
socket.on("bcast", function (data) {
console.log("bcast", data);
// if (data.msg == "face" || data.msg == "eye") {
// ctx.clearRect(0, 0, canvas.width, canvas.height);
if (data.msg == "eye") {
var img = new Image();
img.src = data.src;
img.addEventListener("load", function () {
ctx.drawImage(img, data.rect.x, data.rect.y, data.rect.width, data.rect.height,
data.rect.x + randint(0, 10),
data.rect.y + randint(0, 10),
data.rect.width,
data.rect.height);
})
} else if (data.msg == "face") {
var img = new Image();
img.src = data.src;
img.addEventListener("load", function () {
ctx.drawImage(img, data.rect.x, data.rect.y, data.rect.width, data.rect.height,
data.rect.x,
data.rect.y + 200,
data.rect.width,
data.rect.height);
})
}
});
})
......@@ -54,11 +54,75 @@ function handler (req, res) {
}
var sockets = [];
function new_client_id () {
var ret = 0,
ids = {};
for (var i=0, l=sockets.length; i<l; i++) {
ids[sockets[i].client_id] = true;
}
while(ids[ret] !== undefined) { ret++ };
return ret;
}
function get_room_list () {
return sockets.map(function (s) { return s.client_id });
}
function broadcast (msg, data, exclude) {
for (var i=0, l=sockets.length; i<l; i++) {
if (sockets[i] !== exclude) {
sockets[i].emit(msg, data);
}
}
}
io.sockets.on('connection', function (socket) {
// client lifetime...
socket.on("list", function (data) {
socket.emit("list", { scanners: settings.scanners });
})
socket.client_id = new_client_id();
sockets.push(socket);
console.log(sockets.length + " active sockets");
socket.emit("welcome", { client_id: socket.client_id, total_connections: sockets.length, room: get_room_list() })
broadcast("clientconnect", { client_id: socket.client_id, total_connections: sockets.length, room: get_room_list() }, socket);
/* Interclient Messaging */
socket.on("disconnect", function (data) {
console.log("["+socket.client_id+"] " + "disconnect");
for (var i=0, l=sockets.length; i<l; i++) {
if (sockets[i] === socket) {
sockets.splice(i, 1);
break;
}
}
socket.emit("goodbye", { client_id: socket.client_id, total_connections: sockets.length, room: get_room_list() })
broadcast("clientdisconnect", { client_id: socket.client_id, total_connections: sockets.length, room: get_room_list() }, socket);
console.log(sockets.length + " active sockets");
});
socket.on('bcast', function (data) {
data.client_id = socket.client_id;
broadcast("bcast", data);
});
socket.on('privmsg', function (data) {
for (var i=0, l=sockets.length; i<l; i++) {
var s = sockets[i];
if (s.client_id == data.client_id) {
data.client_id = socket.client_id;
s.emit('privmsg', data);
break;
}
}
});
/* Camera */
// socket.on("list", function (data) {
// socket.emit("list", { scanners: settings.scanners });
// })
socket.on("record", function (data) {
//var scan = spawn("scanimage", ["--device", settings.scanner, "--format", "pnm"] );
......
......@@ -2,7 +2,23 @@
font-family: "Logisoso";
src: url("fonts/Logisoso.ttf");
}
body {
font-family: "Logisoso", serif;
background: black;
}
#content {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
#canvas {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment