protonphoton/LJ
7
0
Fork 1
Code Issues Pull requests 1 Releases Wiki Activity

newUI, python3,...

Browse source
This commit is contained in:
sam 2020-09-19 14:28:56 +02:00
parent 0bb0049f02
commit e9d3009ffb
551 changed files with 22992 additions and 787437 deletions
Download patch file Download diff file Expand all files Collapse all files

72
www/trckr/js/emotion_classifier.js Normal file
View file

@ -0,0 +1,72 @@
"use strict";
var emotionClassifier = function() {
var previousParameters = [];
var classifier = {};
var emotions = [];
var coefficient_length;
this.getEmotions = function() {
return emotions;
}
this.init = function(model) {
// load it
for (var m in model) {
emotions.push(m);
classifier[m] = {};
classifier[m]['bias'] = model[m]['bias'];
classifier[m]['coefficients'] = model[m]['coefficients'];
}
coefficient_length = classifier[emotions[0]]['coefficients'].length;
}
this.getBlank = function() {
var prediction = [];
for (var j = 0;j < emotions.length;j++) {
prediction[j] = {"emotion" : emotions[j], "value" : 0.0};
}
return prediction;
}
this.predict = function(parameters) {
var prediction = [];
for (var j = 0;j < emotions.length;j++) {
var e = emotions[j];
var score = classifier[e].bias;
for (var i = 0;i < coefficient_length;i++) {
score += classifier[e].coefficients[i]*parameters[i+6];
}
prediction[j] = {"emotion" : e, "value" : 0.0};
prediction[j]['value'] = 1.0/(1.0 + Math.exp(-score));
}
return prediction;
}
this.meanPredict = function (parameters) {
// store to array of 10 previous parameters
previousParameters.splice(0, previousParameters.length == 10 ? 1 : 0);
previousParameters.push(parameters.slice(0));
if (previousParameters.length > 9) {
// calculate mean of parameters?
var meanParameters = [];
for (var i = 0;i < parameters.length;i++) {
meanParameters[i] = 0;
}
for (var i = 0;i < previousParameters.length;i++) {
for (var j = 0;j < parameters.length;j++) {
meanParameters[j] += previousParameters[i][j];
}
}
for (var i = 0;i < parameters.length;i++) {
meanParameters[i] /= 10;
}
// calculate logistic regression
return this.predict(meanParameters);
} else {
return false;
}
}
}

26
www/trckr/js/emotionmodel.js Normal file
View file

@ -0,0 +1,26 @@
var emotionModel = {
"angry" : {
"bias" : -2.3768163629,
"coefficients" : [-0.026270300474413848, 0.037963304603547195, 0.25318394482150264, -0.36801694354709802, -0.059638621925431838, 6.3145056900010567e-17, 0.094520059272651849, 0.21347244366388901, 0.42885313652690621, -1.5592214434343613e-14, 0.13850079872874066, -5.1485910666665307e-16, 0.33298910350203975, 8.0357363919330235e-16, 0.0025325096363696059, -0.44615090964065951, -1.5784656134660036e-15, 0.047596008125675944],
},
"disgusted" : {
"bias" : -2.27900176842,
"coefficients" : [0.042360511043701296, 0.1282033922181087, 0.12391812407152457, -0.27567823277270387, 0.1421150306247343, -3.1081856766624292e-16, 0.12612972927139088, 0.23426310789552218, 0.058894842405560956, -4.0618311657856847e-15, 0.22340906131116328, -5.81584759084207e-15, 0.25735218595500009, 1.3658078149815552e-15, -0.12506850140605949, -0.9463447584787309, -4.555025133881674e-15, 0.07141679477545719],
},
"fear" : {
"bias" : -3.40339917096,
"coefficients" : [-0.1484066846778026, -0.090079860583144475, -0.16138464891003612, 0.078750143250805593, 0.070521075864349317, 3.6426173865029096e-14, 0.54106033239630258, 0.049586639890528791, -0.10793093750863458, -5.1279691693889055e-15, -0.092243236155683667, -1.5165430767377168e-14, 0.19842076279793416, 3.8282960479670228e-15, -0.67367184030514637, -0.2166709100861198, 1.1995348541944584e-14, -0.20024153378658624],
},
"sad" : {
"bias" : -2.75274632938,
"coefficients" : [0.092611010001705449, -0.12883530427748521, -0.068975994604949298, -0.19623077060801897, 0.055312197843294802, -3.5874521027522394e-16, 0.46315306348086854, -0.32103622843654361, -0.46536626891885491, 1.725612051187888e-14, -0.40841535552399683, 2.1258665882389598e-14, 0.45405204011625938, 5.9194289392226669e-15, 0.094410500655151899, -0.4861387223131064, -3.030330454831321e-15, 0.73708254653765559],
},
"surprised" : {
"bias" : -2.86262062696,
"coefficients" : [-0.12854109490879712, -0.049194392540246726, -0.22856553950573175, 0.2992140056765602, -0.25975558754705375, 1.4688408313649554e-09, -0.13685597104348368, -0.23581884244542603, 0.026447180058097462, 1.6822695398601112e-10, 0.095712304864421921, -4.4670230074132591e-10, 0.40505706085269738, 2.7821987602166784e-11, -0.54367856543588833, -0.096320945782919151, 1.4239801195516449e-10, -0.7238167998685946],
},
"happy" : {
"bias" : -1.4786712822,
"coefficients" : [0.014837209675880276, 0.31092627456808286, -0.1214238695400552, 0.45265837869400843, 0.36700140259900887, 1.7113646510738279e-15, -0.4786251427206033, -0.15377369505521801, -0.16948121903942992, 6.0300272629176253e-15, -0.021184992727875669, -6.9318606881292957e-15, -0.81611603551588852, -3.7883560238442657e-15, 0.1486320646217055, 0.94973410351769527, 3.6260400713070416e-15, -0.31361179943007411],
},
};

293
www/trckr/js/face_deformer.js Normal file
View file

@ -0,0 +1,293 @@
"use strict";
var faceDeformer = function() {
var gl, verticeMap;
var numTriangles;
var maxx, minx, maxy, miny;
var width, height;
var first = true;
var texCoordBuffer, gridCoordbuffer;
var texCoordLocation;
var pdmModel;
var usegrid = false;
var drawProgram, gridProgram;
this.init = function(canvas) {
// ready a webgl element
gl = getWebGLContext(canvas);
gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
}
this.load = function(element, points, pModel, vertices) {
pdmModel = pModel;
if (vertices) {
verticeMap = vertices;
} else {
verticeMap = pdmModel.path.vertices;
}
numTriangles = verticeMap.length;
// get cropping
maxx = 0;
minx = element.width;
maxy = 0;
miny = element.height;
for (var i = 0;i < points.length;i++) {
if (points[i][0] > maxx) maxx = points[i][0];
if (points[i][0] < minx) minx = points[i][0];
if (points[i][1] > maxy) maxy = points[i][1];
if (points[i][1] < miny) miny = points[i][1];
}
minx = Math.floor(minx);
maxx = Math.ceil(maxx);
miny = Math.floor(miny);
maxy = Math.ceil(maxy);
width = maxx-minx;
height = maxy-miny;
if (element.tagName == 'VIDEO' || element.tagName == 'IMG') {
var ca = document.createElement('canvas');
ca.width = element.width;
ca.height = element.height;
var cc = ca.getContext('2d');
cc.drawImage(element, 0, 0, element.width, element.height);
} else if (element.tagName == 'CANVAS') {
var cc = element.getContext('2d');
}
var image = cc.getImageData(minx, miny, width, height);
// correct points
var nupoints = [];
for (var i = 0;i < points.length;i++) {
nupoints[i] = [];
nupoints[i][0] = points[i][0] - minx;
nupoints[i][1] = points[i][1] - miny;
}
// create vertices based on points
var textureVertices = [];
for (var i = 0;i < verticeMap.length;i++) {
textureVertices.push(nupoints[verticeMap[i][0]][0]/width);
textureVertices.push(nupoints[verticeMap[i][0]][1]/height);
textureVertices.push(nupoints[verticeMap[i][1]][0]/width);
textureVertices.push(nupoints[verticeMap[i][1]][1]/height);
textureVertices.push(nupoints[verticeMap[i][2]][0]/width);
textureVertices.push(nupoints[verticeMap[i][2]][1]/height);
}
if (first) {
// create program for drawing grid
var gridVertexShaderProg = [
"attribute vec2 a_position;",
"",
"uniform vec2 u_resolution;",
"",
"void main() {",
" vec2 zeroToOne = a_position / u_resolution;",
" vec2 zeroToTwo = zeroToOne * 2.0;",
" vec2 clipSpace = zeroToTwo - 1.0;",
" gl_Position = vec4(clipSpace * vec2(1, -1), 0, 1);",
"}"
].join('\n');
var gridFragmentShaderProg = [
"void main() {",
" gl_FragColor = vec4(0.2, 0.2, 0.2, 1.0);",
"}"
].join('\n');
var gridVertexShader = loadShader(gl, gridVertexShaderProg, gl.VERTEX_SHADER);
var gridFragmentShader = loadShader(gl, gridFragmentShaderProg, gl.FRAGMENT_SHADER);
try {
gridProgram = createProgram(gl, [gridVertexShader, gridFragmentShader]);
} catch(err) {
alert("There was a problem setting up the webGL programs. Maybe you should try it in another browser. :(");
}
gridCoordbuffer = gl.createBuffer();
// create program for drawing deformed face
var vertexShaderProg = [
"attribute vec2 a_texCoord;",
"attribute vec2 a_position;",
"",
"varying vec2 v_texCoord;",
"",
"uniform vec2 u_resolution;",
"",
"void main() {",
" vec2 zeroToOne = a_position / u_resolution;",
" vec2 zeroToTwo = zeroToOne * 2.0;",
" vec2 clipSpace = zeroToTwo - 1.0;",
" gl_Position = vec4(clipSpace * vec2(1, -1), 0, 1);",
" ",
" v_texCoord = a_texCoord;",
"}"
].join('\n');
var fragmentShaderProg = [
"precision mediump float;",
"",
"uniform sampler2D u_image;",
"",
"varying vec2 v_texCoord;",
"",
"void main() {",
" gl_FragColor = texture2D(u_image, v_texCoord);",
"}"
].join('\n');
var vertexShader = loadShader(gl, vertexShaderProg, gl.VERTEX_SHADER);
var fragmentShader = loadShader(gl, fragmentShaderProg, gl.FRAGMENT_SHADER);
drawProgram = createProgram(gl, [vertexShader, fragmentShader]);
texCoordBuffer = gl.createBuffer();
first = false;
}
// load program for drawing grid
gl.useProgram(gridProgram);
// set the resolution for grid program
var resolutionLocation = gl.getUniformLocation(gridProgram, "u_resolution");
gl.uniform2f(resolutionLocation, gl.drawingBufferWidth, gl.drawingBufferHeight);
// load program for drawing deformed face
gl.useProgram(drawProgram);
// look up where the vertex data needs to go.
texCoordLocation = gl.getAttribLocation(drawProgram, "a_texCoord");
// provide texture coordinates for face vertices (i.e. where we're going to copy face vertices from).
gl.enableVertexAttribArray(texCoordLocation);
gl.bindBuffer(gl.ARRAY_BUFFER, texCoordBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(textureVertices), gl.STATIC_DRAW);
gl.vertexAttribPointer(texCoordLocation, 2, gl.FLOAT, false, 0, 0);
// Create the texture.
var texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
// Upload the image into the texture.
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
// set the resolution for draw program
resolutionLocation = gl.getUniformLocation(drawProgram, "u_resolution");
gl.uniform2f(resolutionLocation, gl.drawingBufferWidth, gl.drawingBufferHeight);
}
this.draw = function(points) {
if (usegrid) {
// switch program if needed
gl.useProgram(drawProgram);
//texCoordLocation = gl.getAttribLocation(drawProgram, "a_texCoord");
gl.enableVertexAttribArray(texCoordLocation);
gl.bindBuffer(gl.ARRAY_BUFFER, texCoordBuffer);
gl.vertexAttribPointer(texCoordLocation, 2, gl.FLOAT, false, 0, 0);
usegrid = false;
}
// create drawvertices based on points
var vertices = [];
for (var i = 0;i < verticeMap.length;i++) {
vertices.push(points[verticeMap[i][0]][0]);
vertices.push(points[verticeMap[i][0]][1]);
vertices.push(points[verticeMap[i][1]][0]);
vertices.push(points[verticeMap[i][1]][1]);
vertices.push(points[verticeMap[i][2]][0]);
vertices.push(points[verticeMap[i][2]][1]);
}
var positionLocation = gl.getAttribLocation(drawProgram, "a_position");
// Create a buffer for the position of the vertices.
var drawPosBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, drawPosBuffer);
gl.enableVertexAttribArray(positionLocation);
gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
// Draw the face vertices
gl.drawArrays(gl.TRIANGLES, 0, numTriangles*3);
}
this.drawGrid = function(points) {
if (!usegrid) {
gl.useProgram(gridProgram);
usegrid = true;
}
// create drawvertices based on points
var vertices = [];
// create new texturegrid
for (var i = 0;i < verticeMap.length;i++) {
vertices.push(points[verticeMap[i][0]][0]);
vertices.push(points[verticeMap[i][0]][1]);
vertices.push(points[verticeMap[i][1]][0]);
vertices.push(points[verticeMap[i][1]][1]);
vertices.push(points[verticeMap[i][1]][0]);
vertices.push(points[verticeMap[i][1]][1]);
vertices.push(points[verticeMap[i][2]][0]);
vertices.push(points[verticeMap[i][2]][1]);
vertices.push(points[verticeMap[i][2]][0]);
vertices.push(points[verticeMap[i][2]][1]);
vertices.push(points[verticeMap[i][0]][0]);
vertices.push(points[verticeMap[i][0]][1]);
}
var positionLocation = gl.getAttribLocation(gridProgram, "a_position");
// Create a buffer for position of the vertices (lines)
gl.bindBuffer(gl.ARRAY_BUFFER, gridCoordbuffer);
gl.enableVertexAttribArray(positionLocation);
gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
// Draw the lines
gl.drawArrays(gl.LINES, 0, numTriangles*6);
}
this.clear = function() {
gl.clear(gl.COLOR_BUFFER_BIT);
}
this.calculatePositions = function(parameters, useTransforms) {
var x, y, a, b;
var numParameters = parameters.length;
var positions = [];
for (var i = 0;i < pdmModel.patchModel.numPatches;i++) {
x = pdmModel.shapeModel.meanShape[i][0];
y = pdmModel.shapeModel.meanShape[i][1];
for (var j = 0;j < numParameters-4;j++) {
x += pdmModel.shapeModel.eigenVectors[(i*2)][j]*parameters[j+4];
y += pdmModel.shapeModel.eigenVectors[(i*2)+1][j]*parameters[j+4];
}
if (useTransforms) {
a = parameters[0]*x - parameters[1]*y + parameters[2];
b = parameters[0]*y + parameters[1]*x + parameters[3];
x += a;
y += b;
}
positions[i] = [x,y];
}
return positions;
}
}

4
www/trckr/js/gendermodel.js Normal file
View file

@ -0,0 +1,4 @@
var emotionModel = {
"female" : {"bias" : 0.2032715028,"coefficients" : [-0.012175107151058892, -0.02547077166891205, -0.2566348527573602, 0.11310242239983805, 0.047662190057044897, -2.8042459462986078e-16, 0.3195685402512452, 0.28237816481413897, 0.18543701164340573, -6.7673159194176704e-15, -0.19586878878113456, 4.2056286434386572e-15, -0.28249143405077398, -3.1307226033279127e-15, -0.20117514352322866, 0.078204621229952198, -2.9508044403457735e-16, 0.099928680431662836],},
"male" : {"bias" : -0.2032715028,"coefficients" : [0.012175107151058849, 0.02547077166891203, 0.25663485275736025, -0.11310242239983825, -0.047662190057045001, 2.9467555630692706e-16, -0.31956854025124526, -0.28237816481413891, -0.18543701164340579, 6.7687148929820262e-15, 0.19586878878113456, -4.1758151261263302e-15, 0.28249143405077398, 3.122371549856354e-15, 0.20117514352322877, -0.078204621229952295, 2.161563179053083e-16, -0.099928680431662809],},
};

7
www/trckr/js/libs/Stats.js Normal file
View file

@ -0,0 +1,7 @@
// stats.js r8 - http://github.com/mrdoob/stats.js
var Stats=function(){var h,a,n=0,o=0,i=Date.now(),u=i,p=i,l=0,q=1E3,r=0,e,j,f,b=[[16,16,48],[0,255,255]],m=0,s=1E3,t=0,d,k,g,c=[[16,48,16],[0,255,0]];h=document.createElement("div");h.style.cursor="pointer";h.style.width="80px";h.style.opacity="0.9";h.style.zIndex="10001";h.addEventListener("mousedown",function(a){a.preventDefault();n=(n+1)%2;n==0?(e.style.display="block",d.style.display="none"):(e.style.display="none",d.style.display="block")},!1);e=document.createElement("div");e.style.textAlign=
"left";e.style.lineHeight="1.2em";e.style.backgroundColor="rgb("+Math.floor(b[0][0]/2)+","+Math.floor(b[0][1]/2)+","+Math.floor(b[0][2]/2)+")";e.style.padding="0 0 3px 3px";h.appendChild(e);j=document.createElement("div");j.style.fontFamily="Helvetica, Arial, sans-serif";j.style.fontSize="9px";j.style.color="rgb("+b[1][0]+","+b[1][1]+","+b[1][2]+")";j.style.fontWeight="bold";j.innerHTML="FPS";e.appendChild(j);f=document.createElement("div");f.style.position="relative";f.style.width="74px";f.style.height=
"30px";f.style.backgroundColor="rgb("+b[1][0]+","+b[1][1]+","+b[1][2]+")";for(e.appendChild(f);f.children.length<74;)a=document.createElement("span"),a.style.width="1px",a.style.height="30px",a.style.cssFloat="left",a.style.backgroundColor="rgb("+b[0][0]+","+b[0][1]+","+b[0][2]+")",f.appendChild(a);d=document.createElement("div");d.style.textAlign="left";d.style.lineHeight="1.2em";d.style.backgroundColor="rgb("+Math.floor(c[0][0]/2)+","+Math.floor(c[0][1]/2)+","+Math.floor(c[0][2]/2)+")";d.style.padding=
"0 0 3px 3px";d.style.display="none";h.appendChild(d);k=document.createElement("div");k.style.fontFamily="Helvetica, Arial, sans-serif";k.style.fontSize="9px";k.style.color="rgb("+c[1][0]+","+c[1][1]+","+c[1][2]+")";k.style.fontWeight="bold";k.innerHTML="MS";d.appendChild(k);g=document.createElement("div");g.style.position="relative";g.style.width="74px";g.style.height="30px";g.style.backgroundColor="rgb("+c[1][0]+","+c[1][1]+","+c[1][2]+")";for(d.appendChild(g);g.children.length<74;)a=document.createElement("span"),
a.style.width="1px",a.style.height=Math.random()*30+"px",a.style.cssFloat="left",a.style.backgroundColor="rgb("+c[0][0]+","+c[0][1]+","+c[0][2]+")",g.appendChild(a);return{domElement:h,update:function(){i=Date.now();m=i-u;s=Math.min(s,m);t=Math.max(t,m);k.textContent=m+" MS ("+s+"-"+t+")";var a=Math.min(30,30-m/200*30);g.appendChild(g.firstChild).style.height=a+"px";u=i;o++;if(i>p+1E3)l=Math.round(o*1E3/(i-p)),q=Math.min(q,l),r=Math.max(r,l),j.textContent=l+" FPS ("+q+"-"+r+")",a=Math.min(30,30-l/
100*30),f.appendChild(f.firstChild).style.height=a+"px",p=i,o=0}}};

5
www/trckr/js/libs/d3.min.js vendored Normal file
View file

File diff suppressed because one or more lines are too long

94
www/trckr/js/libs/dat.gui.min.js vendored Normal file
View file

File diff suppressed because one or more lines are too long

1
www/trckr/js/libs/jquery.imgareaselect.pack.js Normal file
View file

File diff suppressed because one or more lines are too long

2
www/trckr/js/libs/jquery.min.js vendored Normal file
View file

File diff suppressed because one or more lines are too long

185
www/trckr/js/libs/poisson_new.js Normal file
View file

@ -0,0 +1,185 @@
/**
* Poisson Image Editing module
* http://rest-term.com
*/
(function() {
var Poisson; // top-level namaspace
var _root = this; // reference to 'window' or 'global'
if(typeof exports !== 'undefined') {
Poisson = exports; // for CommonJS
} else {
Poisson = _root.Poisson = {};
}
// core operations
var EPS = 1.0E-08;
var ctx = null,
images = [new Image(), new Image(), new Image()],
files = [],
data = [],
loadedCount = 0;
var sumf = new Float64Array(3),
sumfstar = new Float64Array(3),
sumvq = new Float64Array(3),
fp = new Float64Array(3),
fq = new Float64Array(3),
gp = new Float64Array(3),
gq = new Float64Array(3),
subf = new Float64Array(3),
naddr = new Int32Array(4),
subg = new Float64Array(3);
function pt1(y, offsetY, x, offsetX, w, h, sumf, blendData, m, sumvq, srcData, l, naddr) {
if(y + offsetY >= 0 && x + offsetX >= 0 &&
y + offsetY < h && x + offsetX < w) {
for(n=0; n<4; n++) {
for(var c=0; c<3; c++) {
sumf[c] += blendData[naddr[n] + m + c];
sumvq[c] += srcData[l + c] - srcData[naddr[n] + c];
}
}
}
}
function pt2(y, offsetY, x, offsetX, w, h, fp, gp, dstData, fq, gq, sumfstar, subf, subg, sumf, blendData, m, sumvq, srcData, l, naddr) {
if(y + offsetY >= 0 && x + offsetX >= 0 &&
y + offsetY < h && x + offsetX < w) {
fp[0] = dstData[l + m];
fp[1] = dstData[l + m + 1];
fp[2] = dstData[l + m + 2];
gp[0] = srcData[l];
gp[1] = srcData[l + 1];
gp[2] = srcData[l + 2];
for(n=0; n<4; n++) {
for(c=0; c<3; c++) {
fq[c] = dstData[naddr[n] + m + c];
// modification : we ignore pixels outside face mask, since these cause artifacts
//gq[c] = srcData[naddr[n] + c];
gq[c] = srcData[l+c];
sumfstar[c] += fq[c];
subf[c] = fp[c] - fq[c];
subf[c] = subf[c] > 0 ? subf[c] : -subf[c];
subg[c] = gp[c] - gq[c];
subg[c] = subg[c] > 0 ? subg[c] : -subg[c];
if(subf[c] > subg[c]) {
sumvq[c] += subf[c];
} else {
sumvq[c] += subg[c];
}
}
}
}
}
function pt3(fp, c, sumf, sumfstar, sumvq, terminate, EPS, blendData, l, m, srcData, paste) {
fp[c] = (sumf[c] + sumfstar[c] + sumvq[c])*0.25; // division 4
error = Math.floor(fp[c] - blendData[l + m + c]);
error = error > 0 ? error : -error;
if(terminate[c] && error >
EPS*(1 + (fp[c] > 0 ? fp[c] : -fp[c]))) {
terminate[c] = false;
//log[l+m+c] = {x:x,y:y,c:c,error:error};
}
blendData[l + m + c] = fp[c];
if(paste) blendData[l + m + c] = srcData[l + c];
}
var core = {
// loads images
load: function(srcCanvas, dstCanvas, maskCanvas, onComplete, onError) {
ctx = document.createElement('canvas').getContext('2d');
// load complete handler
var imgData = srcCanvas.getContext('2d').getImageData(0, 0, srcCanvas.width, srcCanvas.height);
data[0] = imgData;
imgData = dstCanvas.getContext('2d').getImageData(0, 0, dstCanvas.width, dstCanvas.height);
data[1] = imgData;
imgData = maskCanvas.getContext('2d').getImageData(0, 0, maskCanvas.width, maskCanvas.height);
data[2] = imgData;
ctx.drawImage(dstCanvas, 0, 0);
data[3] = dstCanvas.getContext('2d').getImageData(0, 0, dstCanvas.width, dstCanvas.height);
if(typeof onComplete === 'function') {
onComplete(data);
}
},
reset: function() {
ctx.drawImage(dstCanvas, 0, 0);
data[3] = ctx.getImageData(0, 0, dstCanvas.width, dstCanvas.height);
return data[3];
},
// applies poisson image editing
blend: function(iteration, offsetX, offsetY, paste) {
var w = data[0].width,
h = data[0].height,
len = w*h*4,
srcData = data[0].data,
dstData = data[1].data,
maskData = data[2].data,
blendData = data[3].data,
edge = false,
error = 0.0,
threashold = 128,
terminate = [],
step, l, m;
var log = {};
// validation
if(!(parseInt(iteration) && typeof(offsetX) == "number" && typeof(offsetY) == "number")) {
throw TypeError('invalid parameter type');
}
// core operation
for(var i=0; i<iteration; i++) {
terminate = [true, true, true];
for(var y=1; y<h-1; y++) {
step = y*w << 2;
for(var x=1; x<w-1; x++) {
l = step + (x << 2);
m = offsetY*w + offsetX << 2;
naddr[0] = l - (w << 2);
naddr[1] = l - 4;
naddr[2] = l + 4;
naddr[3] = l + (w << 2);
if(maskData[l] > threashold) { // on the mask
sumf[0] = 0;
sumf[1] = 0;
sumf[2] = 0;
sumfstar[0] = 0;
sumfstar[1] = 0;
sumfstar[2] = 0;
sumvq[0] = 0;
sumvq[1] = 0;
sumvq[2] = 0;
edge = false;
for(var n=0; n<4; n++) {
if(maskData[naddr[n]] <= threashold) {
edge = true;
break;
}
}
if(!edge) {
pt1(y, offsetY, x, offsetX, w, h, sumf, blendData, m, sumvq, srcData, l, naddr);
} else {
pt2(y, offsetY, x, offsetX, w, h, fp, gp, dstData, fq, gq, sumfstar, subf, subg, sumf, blendData, m, sumvq, srcData, l, naddr);
}
for(c=0; c<3; c++) {
pt3(fp, c, sumf, sumfstar, sumvq, terminate, EPS, blendData, l, m, srcData, paste)
}
} // end mask
} // end x loop
} // end y loop
if(terminate[0] && terminate[1] && terminate[2]) break;
} // end iteration
//core.debugPlot(blendData, log);
return data[3];
},
debugPlot: function(img, data) {
for(var i in data) {
console.log(data[i]);
img[i] = 255;
}
}
};
// aliases (public APIs)
Poisson.load = core.load;
Poisson.reset = core.reset;
Poisson.blend = core.blend;
}).call(this);

44
www/trckr/js/libs/utils.js Normal file
View file

@ -0,0 +1,44 @@
// helper functions
/**
* Provides requestAnimationFrame in a cross browser way.
*/
window.requestAnimFrame = (function() {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(/* function FrameRequestCallback */ callback, /* DOMElement Element */ element) {
return window.setTimeout(callback, 1000/60);
};
})();
/**
* Provides cancelRequestAnimationFrame in a cross browser way.
*/
window.cancelRequestAnimFrame = (function() {
return window.cancelAnimationFrame ||
window.webkitCancelRequestAnimationFrame ||
window.mozCancelRequestAnimationFrame ||
window.oCancelRequestAnimationFrame ||
window.msCancelRequestAnimationFrame ||
window.clearTimeout;
})();
// video support utility functions
function supports_video() {
return !!document.createElement('video').canPlayType;
}
function supports_h264_baseline_video() {
if (!supports_video()) { return false; }
var v = document.createElement("video");
return v.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');
}
function supports_webm_video() {
if (!supports_video()) { return false; }
var v = document.createElement("video");
return v.canPlayType('video/webm; codecs="vp8"');
}

333
www/trckr/js/libs/webgl-utils.js Normal file
View file

@ -0,0 +1,333 @@
// This code is based on webgl-utils.js authored by Gregg Tavares, license below:
/*
* Copyright (c) 2011, Gregg Tavares
* All rights reserved.
*
* Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions are
* met:
*
* * Redistributions of source code must retain the above copyright notice,
* this list of conditions and the following disclaimer.
*
* * Redistributions in binary form must reproduce the above copyright notice,
* this list of conditions and the following disclaimer in the documentation
* and/or other materials provided with the distribution.
*
* * Neither the name of greggman.com nor the names of its contributors
* may be used to endorse or promote products derived from this software
* without specific prior written permission.
*
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS
* IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
* THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
* PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR
* CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
* EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
* PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
* PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF
* LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
* NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
* SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*/
(function(){
var LOGGING_ENABLED = true;
/**
* Wrapped logging function.
* @param {string} msg The message to log.
*/
const log = function (msg) {
if (!LOGGING_ENABLED) { return; }
if (window.console && window.console.log) {
window.console.log(msg);
}
};
/**
* Wrapped logging function.
* @param {string} msg The message to log.
*/
const error = function (msg) {
if (!LOGGING_ENABLED) { return; }
if (window.console) {
if (window.console.error) {
window.console.error(msg);
} else if (window.console.log) {
window.console.log(msg);
}
}
throw msg;
};
/**
* Turn off all logging.
*/
const loggingOff = function () {
LOGGING_ENABLED = false;
};
/**
* Check if the page is embedded.
* @return {boolean} True of we are in an iframe
*/
const isInIFrame = function () {
return window !== window.top;
};
/**
* Converts a WebGL enum to a string
* @param {!WebGLContext} gl The WebGLContext to use.
* @param {number} value The enum value.
* @return {string} The enum as a string.
*/
const glEnumToString = function (gl, value) {
for (var p in gl) {
if (gl[p] === value) {
return p;
}
}
return '0x' + value.toString(16);
};
/**
* Creates the HTLM for a failure message
* @param {string} canvasContainerId id of container of th
* canvas.
* @return {string} The html.
*/
const makeFailHTML = function (msg) {
return '' +
'<table style="background-color: #8CE; width: 100%; height: 100%;"><tr>' +
'<td align="center">' +
'<div style="display: table-cell; vertical-align: middle;">' +
'<div style="">' + msg + '</div>' +
'</div>' +
'</td></tr></table>';
};
/**
* Mesasge for getting a webgl browser
* @type {string}
*/
// const GET_A_WEBGL_BROWSER = '' +
// 'This page requires a browser that supports WebGL.<br/>' +
// '<a href="http://get.webgl.org">Click here to upgrade your browser.</a>';
/**
* Mesasge for need better hardware
* @type {string}
*/
// const OTHER_PROBLEM = '' +
// "It doesn't appear your computer can support WebGL.<br/>" +
// '<a href="http://get.webgl.org/troubleshooting/">Click here for more information.</a>';
/**
* Creates a webgl context. If creation fails it will
* change the contents of the container of the <canvas>
* tag to an error message with the correct links for WebGL.
* @param {Element} canvas. The canvas element to create a
* context from.
* @param {WebGLContextCreationAttirbutes} optAttribs Any
* creation attributes you want to pass in.
* @return {WebGLRenderingContext} The created context.
*/
const setupWebGL = function (canvas, optAttribs) {
// const showLink = function (str) {
// var container = canvas.parentNode;
// if (container) {
// container.innerHTML = makeFailHTML(str);
// }
// };
if (!window.WebGLRenderingContext) {
// showLink(GET_A_WEBGL_BROWSER);
return null;
}
var context = create3DContext(canvas, optAttribs);
if (!context) {
// showLink(OTHER_PROBLEM);
return null;
}
return context;
};
/**
* Creates a webgl context.
* @param {!Canvas} canvas The canvas tag to get context
* from. If one is not passed in one will be created.
* @return {!WebGLContext} The created context.
*/
const create3DContext = function (canvas, optAttribs) {
var names = ['webgl', 'experimental-webgl'];
var context = null;
for (var ii = 0; ii < names.length; ++ii) {
try {
context = canvas.getContext(names[ii], optAttribs);
} catch (e) {}
if (context) {
break;
}
}
return context;
};
const updateCSSIfInIFrame = function () {
if (isInIFrame()) {
document.body.className = 'iframe';
}
};
/**
* Gets a WebGL context.
* makes its backing store the size it is displayed.
*/
const getWebGLContext = function (canvas) {
if (isInIFrame()) {
updateCSSIfInIFrame();
// make the canvas backing store the size it's displayed.
canvas.width = canvas.clientWidth;
canvas.height = canvas.clientHeight;
}
var gl = setupWebGL(canvas);
return gl;
};
/**
* Loads a shader.
* @param {!WebGLContext} gl The WebGLContext to use.
* @param {string} shaderSource The shader source.
* @param {number} shaderType The type of shader.
* @param {function(string): void) optErrorCallback callback for errors.
* @return {!WebGLShader} The created shader.
*/
const loadShader = function (gl, shaderSource, shaderType, optErrorCallback) {
var errFn = optErrorCallback || error;
// Create the shader object
var shader = gl.createShader(shaderType);
// Load the shader source
gl.shaderSource(shader, shaderSource);
// Compile the shader
gl.compileShader(shader);
// Check the compile status
var compiled = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
if (!compiled) {
// Something went wrong during compilation; get the error
var lastError = gl.getShaderInfoLog(shader);
errFn("*** Error compiling shader '" + shader + "':" + lastError);
gl.deleteShader(shader);
return null;
}
return shader;
};
/**
* Creates a program, attaches shaders, binds attrib locations, links the
* program and calls useProgram.
* @param {!Array.<!WebGLShader>} shaders The shaders to attach
* @param {!Array.<string>} optAttribs The attribs names.
* @param {!Array.<number>} optLocations The locations for the attribs.
*/
const loadProgram = function (gl, shaders, optAttribs, optLocations) {
var program = gl.createProgram();
for (var i = 0; i < shaders.length; ++i) {
gl.attachShader(program, shaders[i]);
}
if (optAttribs) {
for (var i = 0; i < optAttribs.length; ++i) {
gl.bindAttribLocation(
program,
optLocations ? optLocations[i] : i,
optAttribs[i]);
}
}
gl.linkProgram(program);
// Check the link status
const linked = gl.getProgramParameter(program, gl.LINK_STATUS);
if (!linked) {
// something went wrong with the link
const lastError = gl.getProgramInfoLog(program);
error('Error in program linking:' + lastError);
gl.deleteProgram(program);
return null;
}
return program;
};
/**
* Loads a shader from a script tag.
* @param {!WebGLContext} gl The WebGLContext to use.
* @param {string} scriptId The id of the script tag.
* @param {number} optShaderType The type of shader. If not passed in it will
* be derived from the type of the script tag.
* @param {function(string): void) optErrorCallback callback for errors.
* @return {!WebGLShader} The created shader.
*/
const createShaderFromScript = function (
gl, scriptId, optShaderType, optErrorCallback
) {
var shaderSource = '';
var shaderType;
var shaderScript = document.getElementById(scriptId);
if (!shaderScript) {
throw new Error('*** Error: unknown script element' + scriptId);
}
shaderSource = shaderScript.text;
if (!optShaderType) {
if (shaderScript.type === 'x-shader/x-vertex') {
shaderType = gl.VERTEX_SHADER;
} else if (shaderScript.type === 'x-shader/x-fragment') {
shaderType = gl.FRAGMENT_SHADER;
} else if (
shaderType !== gl.VERTEX_SHADER &&
shaderType !== gl.FRAGMENT_SHADER
) {
throw new Error('*** Error: unknown shader type');
}
}
return loadShader(
gl,
shaderSource,
optShaderType || shaderType,
optErrorCallback
);
};
if (typeof exports === 'object' && typeof module !== 'undefined') {
module.exports = {
setupWebGL : setupWebGL,
createProgram : loadProgram,
createShaderFromScript : createShaderFromScript,
getWebGLContext : getWebGLContext,
loadShader : loadShader
}
} else {
// export to global
window.setupWebGL = setupWebGL;
window.createProgram = loadProgram;
window.createShaderFromScriptElement = createShaderFromScript;
window.getWebGLContext = getWebGLContext;
window.loadShader = loadShader;
}
}());

BIN
www/trckr/knobs/green.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 228 KiB

BIN
www/trckr/knobs/red.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 235 KiB

BIN
www/trckr/knobs/yellow.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 244 KiB

BIN
www/trckr/media/Justin-Bieber2_crop.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 8.4 KiB

BIN
www/trckr/media/SeanConnery.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 19 KiB

BIN
www/trckr/media/audrey.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 36 KiB

BIN
www/trckr/media/audrey_crop.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 17 KiB

BIN
www/trckr/media/average.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 32 KiB

BIN
www/trckr/media/average2_crop.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 4.3 KiB

BIN
www/trckr/media/bieber_small.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 33 KiB

BIN
www/trckr/media/bill-murray-snl_crop.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 8.3 KiB

BIN
www/trckr/media/cage.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 31 KiB

BIN
www/trckr/media/cage2_crop.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
www/trckr/media/cap12_edit.mp4 Normal file
View file

Binary file not shown.

BIN
www/trckr/media/cap12_edit.webm Normal file
View file

Binary file not shown.

BIN
www/trckr/media/cap13_edit2.mp4 Normal file
View file

Binary file not shown.

BIN
www/trckr/media/cap13_edit2.webm Normal file
View file

Binary file not shown.

BIN
www/trckr/media/chuck_crop.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 17 KiB

BIN
www/trckr/media/clmtrackr01.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 57 KiB

BIN
www/trckr/media/clmtrackr02.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 16 KiB

BIN
www/trckr/media/clmtrackr_03.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 17 KiB

BIN
www/trckr/media/facemodel_numbering_new.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 32 KiB

BIN
www/trckr/media/facemodel_numbering_new_small.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 21 KiB

BIN
www/trckr/media/fragrance-George-Clooney-main_crop.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
www/trckr/media/franck.mp4 Normal file
View file

Binary file not shown.

BIN
www/trckr/media/franck.webm Normal file
View file

Binary file not shown.

BIN
www/trckr/media/franck_01829.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 26 KiB

BIN
www/trckr/media/franck_02045.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 28 KiB

BIN
www/trckr/media/franck_02159.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 25 KiB

BIN
www/trckr/media/franck_02221.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 25 KiB

BIN
www/trckr/media/franck_02683.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 22 KiB

BIN
www/trckr/media/franck_02888.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 25 KiB

BIN
www/trckr/media/franck_03909.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 24 KiB

BIN
www/trckr/media/franck_03979.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 24 KiB

BIN
www/trckr/media/franck_04000.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 19 KiB

BIN
www/trckr/media/franck_04035.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 25 KiB

BIN
www/trckr/media/franck_04117.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 24 KiB

BIN
www/trckr/media/icon_angry.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1 KiB

BIN
www/trckr/media/icon_happy.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 949 B

BIN
www/trckr/media/icon_sad.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 955 B

BIN
www/trckr/media/icon_surprised.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 883 B

BIN
www/trckr/media/ironman.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 32 KiB

BIN
www/trckr/media/joconde.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 142 KiB

BIN
www/trckr/media/joconde_crop.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
www/trckr/media/kim1_crop.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 16 KiB

BIN
www/trckr/media/obama4_crop.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
www/trckr/media/picasso_drawing_crop.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 9.4 KiB

BIN
www/trckr/media/queen20_crop.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 9.1 KiB

BIN
www/trckr/media/ri_1_crop.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
www/trckr/media/scream_crop.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 8.5 KiB

BIN
www/trckr/media/sean_guru2_crop.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 18 KiB

BIN
www/trckr/media/skullmask.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 38 KiB

BIN
www/trckr/media/terminator_crop.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 14 KiB

BIN
www/trckr/media/vendetta.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 21 KiB

BIN
www/trckr/media/walter2_crop.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 9.5 KiB

222
www/trckr/package-lock.json generated Normal file
View file

@ -0,0 +1,222 @@
<!doctype html>
<html lang="en">
<head>
<title>Face tracker</title>
<meta charset="utf-8">
<style>
#container {
position : relative;
}
#canvas {
position : absolute;
left : 0;
top : 0;
}
#title {
font-family: "Lucida Grande", Verdana, Arial, sans-serif;
text-align: center;
color: #ddd;
font-size: 4ex;
}
#text {
font-family: "Lucida Grande", Verdana, Arial, sans-serif;
text-align: center;
color: #ccc;
font-size: 2ex;
}
#smalltext {
font-family: "Lucida Grande", Verdana, Arial, sans-serif;
text-align: center;
color: #ccc;
font-size: 1.6ex;
}
</style>
</head>
<body style="background-color:#000;">
<script src="./js/libs/utils.js"></script>
<script src="../build/clmtrackr.js"></script>
<div id="content">
<div id="status" style="font-family: 'Lucida Grande', Verdana, Arial, sans-serif; color: #ddd;font-size: 2ex;">not available
</div>
</div>
<div id="container">
<video id="video" width="368" height="288" autoplay loop playsinline>
<!--
<source src="./media/franck.webm" type="video/webm"/>
<source src="./media/franck.mp4" type="video/mp4"/>
<source src="./media/alet.mp4" type="video/mp4"/>
-->
<source src="./media/franck.mp4" type="video/mp4"/>
</video>
<canvas id="canvas" width="368" height="288"></canvas>
</div>
<p style="font-family: 'Lucida Grande', Verdana, Arial, sans-serif; color: #ddd;font-size: 2ex;">Printing coordinates 15 to 70 in facial features:</p>
<p id="positions" style="font-family: 'Lucida Grande', Verdana, Arial, sans-serif; color: #ddd;font-size: 2ex;"></p>
<script>
var videoInput = document.getElementById('video');
var ctracker = new clm.tracker();
var counter = 0;
ctracker.init();
ctracker.start(videoInput);
function positionLoop() {
requestAnimFrame(positionLoop);
var positions = ctracker.getCurrentPosition();
// do something with the positions ...
// print the positions
var positionString = "";
var positionFace = '/trckr/frame '+counter+" ";
if (positions) {
for (var p = 30;p < 45;p++) {
positionString += "featurepoint "+p+" : ["+positions[p][0].toFixed(2)+","+positions[p][1].toFixed(2)+"]<br/>";
positionFace += positions[p][0].toFixed(2)+" "+positions[p][1].toFixed(2)+" ";
}
document.getElementById('positions').innerHTML = positionString;
_WS.s.send(positionFace);
counter +=1;
}
}
positionLoop();
var canvasInput = document.getElementById('canvas');
var cc = canvasInput.getContext('2d');
function drawLoop() {
requestAnimFrame(drawLoop);
cc.clearRect(0, 0, canvasInput.width, canvasInput.height);
ctracker.draw(canvasInput);
}
drawLoop();
</script>
</div>
<!-- LJ style WS : A nettoyer ! -->
<script type="text/javascript">
<!--
var LJ = 'ws://xrkia.org:8081/'
var LJ = 'ws://laser.teamlaser.fr:8081/'
var LJ = 'ws://localhost:8081/'
var LJ = 'ws://localhost:9001/'
-->
var LJ = 'ws://localhost:9001/'
var _WS = {
uri: LJ,
ws: null,
init : function (e) {
_WS.s = new WebSocket(_WS.uri);
_WS.s.onopen = function (e) { _WS.onOpen(e); };
_WS.s.onclose = function (e) { _WS.onClose(e); };
_WS.s.onmessage = function (e) { _WS.onMessage(e); };
_WS.s.onerror = function (e) { _WS.onError(e); };
},
onOpen: function () {
var divtext = document.getElementById('status');
divtext.innerHTML="";
divtext.innerHTML= "Connected";
},
onClose: function () {
_WS.showout('DISCONNECTED');
},
onMessage: function (e) {
var res = e.data.split(" ");
//console.log(e.data)
//console.log(res[0].substring(0,6))
//console.log(res)
//console.log(res[0].slice(1))
var divtext = document.getElementById('status');
var divtextp = document.getElementById('players');
switch (res[0].substring(0,6)) {
case "/statu":
divtext.innerHTML="OCS-2";
break;
case "/playe":
//divtext.innerHTML="OCS-2 ("+res[1]+" player(s))";
//divtextp.innerHTML=" ("+res[1]+" player(s))";
divtext.innerHTML="OCS-2 "+res[1];
divtextp.innerHTML=" "+res[1];
//console.log(res)
break;
default:
//console.log(e);
//console.log(res[0].slice(1))
//console.log(document.getElementById(res[0].slice(1)));
//console.log(res[0].slice(1)+" "+res[1])
//let documentX = document.getElementById(res[0].slice(1));
//documentX.value=res[1];
//document.getElementById(res[0].slice(1)).value = res[1];
document.getElementById(res[0].slice(1)).setAttribute('value',res[1]);
//document.getElementById(res[0].slice(1)).setValue(res[1],true);
document.getElementById(res[0].slice(1)).setValue(res[1],false);
//console.log(documentX.value)
//console.log(document.getElementById(res[0].slice(1)));
_WS.showin(e.data);
}
},
onError: function (e) {
_WS.showin('<span style="color: red;">ERROR:</span> ' + e.data);
},
showin: function (message) {
var divtext = document.getElementById('status');
divtext.innerHTML="";
divtext.innerHTML= message.toString();
},
showout: function (message) {
var divtext = document.getElementById('status');
divtext.innerHTML="";
divtext.innerHTML= message.toString();
},
showstatus: function (message) {
var divtext = document.getElementById('status');
divtext.innerHTML="";
divtext.innerHTML= message.toString();
},
send: function (message) {
if (!message.length) {
alert('Empty message not allowed !');
} else {
_WS.showout(message);
_WS.s.send(message);
}
},
close: function () {
_WS.showout('GOODBYE !');
_WS.s.close();
}
};
window.addEventListener('load', _WS.init, false);
</script>
</body>
</html>

50
www/trckr/styles/bootstrap.min.css vendored Normal file
View file

@ -0,0 +1,50 @@
/*!
* Bootstrap v2.3.1
*
* Copyright 2012 Twitter, Inc
* Licensed under the Apache License v2.0
* http://www.apache.org/licenses/LICENSE-2.0
*
* Designed and built with all the love in the world @twitter by @mdo and @fat.
*/
.clearfix{*zoom:1;}.clearfix:before,.clearfix:after{display:table;content:"";line-height:0;}
.clearfix:after{clear:both;}
.hide-text{font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0;}
.input-block-level{display:block;width:100%;min-height:30px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
.btn{display:inline-block;*display:inline;*zoom:1;padding:4px 12px;margin-bottom:0;font-size:14px;line-height:20px;text-align:center;vertical-align:middle;cursor:pointer;color:#333333;text-shadow:0 1px 1px rgba(255, 255, 255, 0.75);background-color:#f5f5f5;background-image:-moz-linear-gradient(top, #ffffff, #e6e6e6);background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));background-image:-webkit-linear-gradient(top, #ffffff, #e6e6e6);background-image:-o-linear-gradient(top, #ffffff, #e6e6e6);background-image:linear-gradient(to bottom, #ffffff, #e6e6e6);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);border-color:#e6e6e6 #e6e6e6 #bfbfbf;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);*background-color:#e6e6e6;filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);border:1px solid #cccccc;*border:0;border-bottom-color:#b3b3b3;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;*margin-left:.3em;-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);}.btn:hover,.btn:focus,.btn:active,.btn.active,.btn.disabled,.btn[disabled]{color:#333333;background-color:#e6e6e6;*background-color:#d9d9d9;}
.btn:active,.btn.active{background-color:#cccccc \9;}
.btn:first-child{*margin-left:0;}
.btn:hover,.btn:focus{color:#333333;text-decoration:none;background-position:0 -15px;-webkit-transition:background-position 0.1s linear;-moz-transition:background-position 0.1s linear;-o-transition:background-position 0.1s linear;transition:background-position 0.1s linear;}
.btn:focus{outline:thin dotted #333;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px;}
.btn.active,.btn:active{background-image:none;outline:0;-webkit-box-shadow:inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);-moz-box-shadow:inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);box-shadow:inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);}
.btn.disabled,.btn[disabled]{cursor:default;background-image:none;opacity:0.65;filter:alpha(opacity=65);-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}
.btn-large{padding:11px 19px;font-size:17.5px;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;}
.btn-large [class^="icon-"],.btn-large [class*=" icon-"]{margin-top:4px;}
.btn-small{padding:2px 10px;font-size:11.9px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
.btn-small [class^="icon-"],.btn-small [class*=" icon-"]{margin-top:0;}
.btn-mini [class^="icon-"],.btn-mini [class*=" icon-"]{margin-top:-1px;}
.btn-mini{padding:0 6px;font-size:10.5px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
.btn-block{display:block;width:100%;padding-left:0;padding-right:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
.btn-block+.btn-block{margin-top:5px;}
input[type="submit"].btn-block,input[type="reset"].btn-block,input[type="button"].btn-block{width:100%;}
.btn-primary.active,.btn-warning.active,.btn-danger.active,.btn-success.active,.btn-info.active,.btn-inverse.active{color:rgba(255, 255, 255, 0.75);}
.btn-primary{color:#ffffff;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);background-color:#006dcc;background-image:-moz-linear-gradient(top, #0088cc, #0044cc);background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc));background-image:-webkit-linear-gradient(top, #0088cc, #0044cc);background-image:-o-linear-gradient(top, #0088cc, #0044cc);background-image:linear-gradient(to bottom, #0088cc, #0044cc);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0044cc', GradientType=0);border-color:#0044cc #0044cc #002a80;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);*background-color:#0044cc;filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);}.btn-primary:hover,.btn-primary:focus,.btn-primary:active,.btn-primary.active,.btn-primary.disabled,.btn-primary[disabled]{color:#ffffff;background-color:#0044cc;*background-color:#003bb3;}
.btn-primary:active,.btn-primary.active{background-color:#003399 \9;}
.btn-warning{color:#ffffff;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);background-color:#faa732;background-image:-moz-linear-gradient(top, #fbb450, #f89406);background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#fbb450), to(#f89406));background-image:-webkit-linear-gradient(top, #fbb450, #f89406);background-image:-o-linear-gradient(top, #fbb450, #f89406);background-image:linear-gradient(to bottom, #fbb450, #f89406);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffbb450', endColorstr='#fff89406', GradientType=0);border-color:#f89406 #f89406 #ad6704;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);*background-color:#f89406;filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);}.btn-warning:hover,.btn-warning:focus,.btn-warning:active,.btn-warning.active,.btn-warning.disabled,.btn-warning[disabled]{color:#ffffff;background-color:#f89406;*background-color:#df8505;}
.btn-warning:active,.btn-warning.active{background-color:#c67605 \9;}
.btn-danger{color:#ffffff;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);background-color:#da4f49;background-image:-moz-linear-gradient(top, #ee5f5b, #bd362f);background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#ee5f5b), to(#bd362f));background-image:-webkit-linear-gradient(top, #ee5f5b, #bd362f);background-image:-o-linear-gradient(top, #ee5f5b, #bd362f);background-image:linear-gradient(to bottom, #ee5f5b, #bd362f);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffee5f5b', endColorstr='#ffbd362f', GradientType=0);border-color:#bd362f #bd362f #802420;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);*background-color:#bd362f;filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);}.btn-danger:hover,.btn-danger:focus,.btn-danger:active,.btn-danger.active,.btn-danger.disabled,.btn-danger[disabled]{color:#ffffff;background-color:#bd362f;*background-color:#a9302a;}
.btn-danger:active,.btn-danger.active{background-color:#942a25 \9;}
.btn-success{color:#ffffff;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);background-color:#5bb75b;background-image:-moz-linear-gradient(top, #62c462, #51a351);background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#51a351));background-image:-webkit-linear-gradient(top, #62c462, #51a351);background-image:-o-linear-gradient(top, #62c462, #51a351);background-image:linear-gradient(to bottom, #62c462, #51a351);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff62c462', endColorstr='#ff51a351', GradientType=0);border-color:#51a351 #51a351 #387038;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);*background-color:#51a351;filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);}.btn-success:hover,.btn-success:focus,.btn-success:active,.btn-success.active,.btn-success.disabled,.btn-success[disabled]{color:#ffffff;background-color:#51a351;*background-color:#499249;}
.btn-success:active,.btn-success.active{background-color:#408140 \9;}
.btn-info{color:#ffffff;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);background-color:#49afcd;background-image:-moz-linear-gradient(top, #5bc0de, #2f96b4);background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#5bc0de), to(#2f96b4));background-image:-webkit-linear-gradient(top, #5bc0de, #2f96b4);background-image:-o-linear-gradient(top, #5bc0de, #2f96b4);background-image:linear-gradient(to bottom, #5bc0de, #2f96b4);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff2f96b4', GradientType=0);border-color:#2f96b4 #2f96b4 #1f6377;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);*background-color:#2f96b4;filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);}.btn-info:hover,.btn-info:focus,.btn-info:active,.btn-info.active,.btn-info.disabled,.btn-info[disabled]{color:#ffffff;background-color:#2f96b4;*background-color:#2a85a0;}
.btn-info:active,.btn-info.active{background-color:#24748c \9;}
.btn-inverse{color:#ffffff;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);background-color:#363636;background-image:-moz-linear-gradient(top, #444444, #222222);background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#444444), to(#222222));background-image:-webkit-linear-gradient(top, #444444, #222222);background-image:-o-linear-gradient(top, #444444, #222222);background-image:linear-gradient(to bottom, #444444, #222222);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff444444', endColorstr='#ff222222', GradientType=0);border-color:#222222 #222222 #000000;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);*background-color:#222222;filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);}.btn-inverse:hover,.btn-inverse:focus,.btn-inverse:active,.btn-inverse.active,.btn-inverse.disabled,.btn-inverse[disabled]{color:#ffffff;background-color:#222222;*background-color:#151515;}
.btn-inverse:active,.btn-inverse.active{background-color:#080808 \9;}
button.btn,input[type="submit"].btn{*padding-top:3px;*padding-bottom:3px;}button.btn::-moz-focus-inner,input[type="submit"].btn::-moz-focus-inner{padding:0;border:0;}
button.btn.btn-large,input[type="submit"].btn.btn-large{*padding-top:7px;*padding-bottom:7px;}
button.btn.btn-small,input[type="submit"].btn.btn-small{*padding-top:3px;*padding-bottom:3px;}
button.btn.btn-mini,input[type="submit"].btn.btn-mini{*padding-top:1px;*padding-bottom:1px;}
.btn-link,.btn-link:active,.btn-link[disabled]{background-color:transparent;background-image:none;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}
.btn-link{border-color:transparent;cursor:pointer;color:#0088cc;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;}
.btn-link:hover,.btn-link:focus{color:#005580;text-decoration:underline;background-color:transparent;}
.btn-link[disabled]:hover,.btn-link[disabled]:focus{color:#333333;text-decoration:none;}

BIN
www/trckr/styles/border-h.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 72 B

BIN
www/trckr/styles/border-v.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 72 B

41
www/trckr/styles/imgareaselect-default.css Normal file
View file

@ -0,0 +1,41 @@
/*
* imgAreaSelect default style
*/
.imgareaselect-border1 {
background: url(border-v.gif) repeat-y left top;
}
.imgareaselect-border2 {
background: url(border-h.gif) repeat-x left top;
}
.imgareaselect-border3 {
background: url(border-v.gif) repeat-y right top;
}
.imgareaselect-border4 {
background: url(border-h.gif) repeat-x left bottom;
}
.imgareaselect-border1, .imgareaselect-border2,
.imgareaselect-border3, .imgareaselect-border4 {
filter: alpha(opacity=50);
opacity: 0.5;
}
.imgareaselect-handle {
background-color: #fff;
border: solid 1px #000;
filter: alpha(opacity=50);
opacity: 0.5;
}
.imgareaselect-outer {
background-color: #000;
filter: alpha(opacity=50);
opacity: 0.5;
}
.imgareaselect-selection {
}

670
www/trckr/trckrcam1.html Normal file
View file

@ -0,0 +1,670 @@
<!doctype html>
<html lang="en">
<head>
<title>LASERCam 1</title>
<meta charset="utf-8">
<link href="./styles/bootstrap.min.css" rel="stylesheet" type="text/css">
<meta name="apple-mobile-web-app-title" content="Tracker">
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="apple-touch-startup-image" href="../launch.png">
<link rel="apple-touch-icon" href="../touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="152x152" href="../touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="180x180" href="../touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="167x167" href="../touch-icon-ipad-retina.png">
<style>
</style>
<script>
// getUserMedia only works over https in Chrome 47+, so we redirect to https. Also notify user if running from file.
if (window.location.protocol == "file:") {
alert("You seem to be running this example directly from a file. Note that these examples only work when served from a server or localhost due to canvas cross-domain restrictions.");
} else if (window.location.hostname !== "localhost" && window.location.protocol !== "https:"){
window.location.protocol = "http";
//window.location.protocol = "https";
}
</script>
<!--
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-32642923-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
-->
<!-- Web audio buttons defaults -->
<script type="application/javascript" src="../webcomponents-lite.js"></script>
<script>
WebAudioControlsOptions={
useMidi:1,
knobSrc:"knobs/simplegray.png",
knobSprites:100,
switchSrc:"knobs/switch_toggle.png",
sliderSrc:"knobs/vsliderbody.png",
sliderKnobsrc:"knobs/vsliderknob.png",
}
</script>
<script src="../webaudio-controls.js"></script>
<!-- link rel="stylesheet" href="LJgrid.css" / -->
<link rel="stylesheet" type="text/css" href="../selector.min.css">
<script type="application/javascript" src="../selector.min.js"></script>
<link rel="stylesheet" href="../css/common.css" />
</head>
<body style="background-color:#222;">
<script src="./js/libs/utils.js"></script>
<script src="../build/clmtrackr.js"></script>
<script src="./js/libs/Stats.js"></script>
<!--
Top Rack
<div align="center">
<a href="index.html"><img height="25" width="21" src="../knobs/indexs.png"></a>
</div>
-->
<div class="Rackcontent">
<!--
Navigation Rack
-->
<div class="content">
<div class="buttons-7container">
<a href="../index.html">
<div class="webaudiobut">
<div align="center" class="navled">
Index
</div>
</div>
</a>
<a href="../align.html">
<div class="webaudiobut">
<div align="center" class="navled">
Align
</div>
</div>
</a>
<a href="../auralls.html">
<div class="webaudiobut">
<div align="center" class="navled">
Aurora
</div>
</div>
</a>
<a href="trckrcam1.html">
<div class="webaudiobut">
<div align="center" class="navled">
Lasercam
</div>
</div>
</a>
<a href="../simu.html">
<div class="webaudiobut">
<div align="center" class="navled">
Simu
</div>
</div>
</a>
<div class="webaudiobut">
<button type="button" class="navled" style="border : #222222 1px;" onclick="onSubmit(this.id)" id="settings/restart lj" >
rstrt LJ
</button>
</div>
<div class="webaudiobut">
<button type="button" class="navled" style="border : #222222 1px;" onclick="onSubmit(this.id)" id="settings/restart aurora" >
rstrt AU
</button>
</div>
</div>
</div>
<!--
Lasers & colors Rack
-->
<div class="content">
<div class="TopRackGrid">
<div>
<h2>
/TL RGY 1
<span class="shade">&nbsp;</span>
</h2>
<webaudio-switch id="on" value="1" tooltip="Switch-B" height="35" width="85" src="../knobs/switch1.png">
</webaudio-switch>
</div>
<div style="border : #242424 1px solid;background: #000;">
<div align="center" id="line1" class="busled">
LASERcam 1 : Allow to use your webcam + start
</div>
<div align="center" id="status" class="busled">
/team/laser
</div>
</div>
<div></div>
<div>
<div style="margin-top : 30px;">
</div>
<div>
</div>
</div>
</div>
</div>
<!--
Colors Rack
-->
<div class="content">
<div class="Rackgrid">
<div>
<h2>
Colors
</h2>
</div>
<div class="webaudiobut"><webaudio-switch id="noteon 24" value="1" tooltip="Switch-B" height="64" width="64" src="../knobs/big0.png"></webaudio-switch></div>
<div class="webaudiobut"><webaudio-switch id="noteon 25" value="0" tooltip="Switch-B" height="64" width="64" src=" ../knobs/big1.png"></webaudio-switch></div>
<div class="webaudiobut"><webaudio-switch id="noteon 26" value="0" tooltip="Switch-B" height="64" width="64" src="../knobs/big2.png"></webaudio-switch></div>
<div class="webaudiobut"><webaudio-switch id="noteon 27" value="0" tooltip="Switch-B" height="64" width="64" src="../knobs/big3.png"></webaudio-switch></div>
<div></div>
<div class="webaudiobut"><webaudio-switch id="aurora/color/0 red" value="1" tooltip="Switch-B" height="64" width="64" src="knobs/red.png"></webaudio-switch></div>
<div class="webaudiobut"><webaudio-switch id="aurora/color/0 yellow" value="0" tooltip="Switch-B" height="64" width="64" src="knobs/yellow.png"></webaudio-switch></div>
<div class="webaudiobut"><webaudio-switch id="aurora/color/0 green" value="0" tooltip="Switch-B" height="64" width="64" src="knobs/green.png"></webaudio-switch></div>
<div></div>
</div>
</div>
<!--
Webcam Rack
-->
<div class="content" style="background-image: linear-gradient(174deg, #111,#030303);">
<video id="videoel" class="webaudiobut" width="400" height="300" preload="auto" loop playsinline autoplay>
</video>
<canvas id="overlay" width="400" height="300"></canvas>
<input class="btn" type="button" value="wait" style="margin-left: 150px;" disabled="disabled" onclick="startVideo()" id="startbutton"></input>
</div>
<!--
Big Display Rack
-->
<div class="content">
<div id="text" class="busled" style="font-size:1.5em;border : #242424 1px solid;background: #000;-webkit-box-shadow: 4px 6px 10px -1px rgba(0,0,0,0.72);-moz-box-shadow: 4px 6px 10px -1px rgba(0,0,0,0.72);box-shadow: 4px 6px 10px -1px rgba(0,0,0,0.72);">
<div id="gum" class="gum">
<p>To try it out:
<ol>
<li>Allow the page to use your webcamera</li>
<li>Make sure that your face is clearly visible in the video, and click start</li>
<li>See the model fitted to your face</li>
<ol>
</p>
</div>
<div id="nogum" class="nogum">
</div>
</div>
</div>
</div>
<!--
JS
-->
<script>
var vid = document.getElementById('videoel');
var vid_width = vid.width;
var vid_height = vid.height;
var overlay = document.getElementById('overlay');
var overlayCC = overlay.getContext('2d');
/*********** Setup of video/webcam and checking for webGL support *********/
function enablestart() {
var startbutton = document.getElementById('startbutton');
startbutton.value = "start";
startbutton.disabled = null;
}
var insertAltVideo = function(video) {
// insert alternate video if getUserMedia not available
if (supports_video()) {
if (supports_webm_video()) {
video.src = "./media/cap12_edit.webm";
} else if (supports_h264_baseline_video()) {
video.src = "./media/cap12_edit.mp4";
} else {
return false;
}
return true;
} else return false;
}
function adjustVideoProportions() {
// resize overlay and video if proportions of video are not 4:3
// keep same height, just change width
var proportion = vid.videoWidth/vid.videoHeight;
vid_width = Math.round(vid_height * proportion);
vid.width = vid_width;
overlay.width = vid_width;
}
function gumSuccess( stream ) {
// add camera stream if getUserMedia succeeded
if ("srcObject" in vid) {
vid.srcObject = stream;
} else {
vid.src = (window.URL && window.URL.createObjectURL(stream));
}
vid.onloadedmetadata = function() {
adjustVideoProportions();
vid.play();
}
vid.onresize = function() {
adjustVideoProportions();
if (trackingStarted) {
ctrack.stop();
ctrack.reset();
ctrack.start(vid);
}
}
}
function gumFail() {
// fall back to video if getUserMedia failed
insertAltVideo(vid);
document.getElementById('gum').className = "hide";
document.getElementById('nogum').className = "nohide";
}
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
window.URL = window.URL || window.webkitURL || window.msURL || window.mozURL;
// set up video
if (navigator.mediaDevices) {
navigator.mediaDevices.getUserMedia({video : true}).then(gumSuccess).catch(gumFail);
} else if (navigator.getUserMedia) {
navigator.getUserMedia({video : true}, gumSuccess, gumFail);
} else {
insertAltVideo(vid);
document.getElementById('gum').className = "hide";
document.getElementById('nogum').className = "nohide";
alert("Your browser does not seem to support getUserMedia, using a fallback video instead.");
}
vid.addEventListener('canplay', enablestart, false);
/*********** Code for face tracking *********/
var ctrack = new clm.tracker();
ctrack.init();
var trackingStarted = false;
var counter = 0;
var layer = 0;
function startVideo() {
// start video
vid.play();
// start tracking
ctrack.start(vid);
trackingStarted = true;
// start loop to draw face
drawLoop();
}
function drawLoop() {
requestAnimFrame(drawLoop);
overlayCC.clearRect(0, 0, vid_width, vid_height);
//psrElement.innerHTML = "score :" + ctrack.getScore().toFixed(4);
var positions = ctrack.getCurrentPosition();
// do something with the positions ...
// print the positions
var positionString = "";
var positionFace = 'aurora/trckr/frame '+layer+" "+counter+" ";
if (positions) {
ctrack.draw(overlay);
for (var p = 0;p < 71;p++) {
positionString += "featurepoint "+p+" : ["+positions[p][0].toFixed(2)+","+positions[p][1].toFixed(2)+"]<br/>";
positionFace += positions[p][0].toFixed(2)+" "+positions[p][1].toFixed(2)+" ";
}
//document.getElementById('positions').innerHTML = positionString;
_WS.s.send(positionFace);
counter +=1;
}
}
/*********** Code for stats **********/
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
document.getElementById('container').appendChild( stats.domElement );
// update stats on every iteration
document.addEventListener('clmtrackrIteration', function(event) {
stats.update();
}, false);
</script>
<!-- LJ style WS : A nettoyer ! -->
<script type="text/javascript">
var LJ = 'ws://192.168.2.43:9001/'
var LJ = 'ws://192.168.2.43:9001/'
var _WS = {
uri: LJ,
ws: null,
init : function (e) {
_WS.s = new WebSocket(_WS.uri);
_WS.s.onopen = function (e) { _WS.onOpen(e); };
_WS.s.onclose = function (e) { _WS.onClose(e); };
_WS.s.onmessage = function (e) { _WS.onMessage(e); };
_WS.s.onerror = function (e) { _WS.onError(e); };
},
onOpen: function () {
_WS.showstatus("Connected to "+LJ);
document.getElementById("on").value = 1;
},
onClose: function () {
_WS.showline1('<span style="color: red;">LJ2 DISCONNECTED</span> ');
},
onMessage: function (e) {
var res = e.data.split(" ");
//console.log(e.data)
//console.log(res[0].substring(0,6))
//console.log(res)
//console.log(res[0].slice(1))
var divtext = document.getElementById('status');
var divtextp = document.getElementById('players');
switch (res[0].substring(0,6)) {
case "/statu":
if (res[2]==="Disconnected"){
_WS.showstatus(res[1]+" "+'<span style="color: red;">'+ res[2]+'</span> ');
}
else{
_WS.showstatus(res[1]+" "+res[2]);
}
break;
case "/redst":
//console.log("red"+res[1]+" "+res[2]);
_WS.showstatus('<span style="color: red;">'+res[1]+" "+ res[2]+'</span> ');
break;
case "/line1":
//divtext.innerHTML="connected to "+LJ;
divtext1.innerHTML=res[1]+" "+res[2];
break;
case "/redline1":
//divtext.innerHTML="connected to "+LJ;
divtext1.innerHTML='<span style="color: red;">'+ res[1]+" "+res[2]+'</span>';
break;
case "/laser":
console.log("/laser "+res[1])
newlaser(res[1])
break;
default:
//console.log("test "+res[0].slice(1)+" "+res[1]);
document.getElementById(res[0].slice(1)).value = res[1];
//_WS.showstatus(e.data);
}
},
showline1: function (message) {
var divtext = document.getElementById('line1');
divtext.innerHTML="";
divtext.innerHTML= message.toString();
},
onError: function (e) {
_WS.showstatus('<span style="color: red;">ERROR:</span> ' + e.data);
},
showin: function (message) {
var divtext = document.getElementById('status');
divtext.innerHTML="";
divtext.innerHTML= message.toString();
},
showout: function (message) {
var divtext = document.getElementById('status');
divtext.innerHTML="";
divtext.innerHTML= message.toString();
},
showstatus: function (message) {
var divtext = document.getElementById('status');
divtext.innerHTML="";
divtext.innerHTML= message.toString();
},
send: function (message) {
if (!message.length) {
alert('Empty message not allowed !');
} else {
_WS.showstatus(message);
_WS.s.send(message);
}
},
close: function () {
_WS.showstatus('GOODBYE !');
_WS.s.close();
}
};
window.addEventListener('load', _WS.init, false);
//
// Forms submits
//
function onSubmit(clicked_id) {
var input = document.getElementById(clicked_id);
console.log("/" + clicked_id + " " + input.value);
_WS.send("/" + clicked_id + " " + input.value);
}
</script>
<!--
web audio encoders scripts
-->
<script type="text/javascript">
var message="";
var log=[];
var knobs = document.getElementsByTagName('webaudio-knob');
for(var i = 0; i < knobs.length; i++){
knobs[i].addEventListener("input",Dump,false);
knobs[i].addEventListener("change",Dump,false);
}
var sliders = document.getElementsByTagName('webaudio-slider');
for(var i = 0; i < sliders.length; i++){
sliders[i].addEventListener("input",Dump,false);
sliders[i].addEventListener("change",Dump,false);
}
var switches = document.getElementsByTagName('webaudio-switch');
for(var i = 0; i < switches.length; i++) {
switches[i].addEventListener("change",Dump,false);
}
function newlaser(id) {
console.log("newlaser " +id)
var laserid = 24+ parseInt(id,10);
laser = "noteon "+laserid;
console.log("laser "+laser);
nolaser();
nofx();
var x = document.getElementById(laser);
x.value = 1 ;
}
function nolaser() {
//console.log("nolaser")
var x = document.getElementById("noteon 24");
x.value = 0 ;
var x = document.getElementById("noteon 25");
x.value = 0 ;
var x = document.getElementById("noteon 26");
x.value = 0 ;
var x = document.getElementById("noteon 27");
x.value = 0 ;
}
// RGB Colors
function nocolor() {
//console.log("nocolor0")
var x = document.getElementById("aurora/color/ red");
x.value = 0 ;
var x = document.getElementById("aurora/color/ yellow");
x.value = 0 ;
var x = document.getElementById("aurora/color/ green");
x.value = 0 ;
var x = document.getElementById("aurora/color/ blue");
x.value = 0 ;
var x = document.getElementById("aurora/color/ cyan");
x.value = 0 ;
var x = document.getElementById("aurora/color/ white");
x.value = 0 ;
}
// RGY Colors
//function nocolor() {
//var x = document.getElementById("aurora/color/ red");
// x.value = 0 ;
//var x = document.getElementById("aurora/color/ yellow");
// x.value = 0 ;
//var x = document.getElementById("aurora/color/ green");
// x.value = 0 ;
//}
function Dump(e) {
var str="";
str=e.type + " : " + e.target.id + " : " + e.target.value + " ";
console.log(str);
log.unshift(str);
log.length=1;
str="";
for(var i=19;i>=0;--i) {
if(log[i])
str+=log[i]+"<br/>";
}
_WS.send("/" + e.target.id + " " + e.target.value);
var res = e.target.id.split(" ");
// on off
if (e.target.id === "on" && e.type === "change") {
window.location.reload();
}
// Go to index
if (e.target.id === "index" && e.type === "change") {
window.location.assign("../index.html");
}
// Fx
if (res[0].substring(7,9) === "fx" && e.type === "change") {
var layer = res[0].substring(10,12);
nofx0();
var x = document.getElementById(e.target.id);
x.value = 1 ;
_WS.showstatus(e.target.id);
}
// Colors
if (res[0].substring(7,9) === "co" && e.type === "change") {
nocolor();
_WS.send("/"+res[0]+laser+ " "+ res[1]+ " " + e.target.value);
var x = document.getElementById(e.target.id);
x.value = 1 ;
//_WS.showstatus("Laser "+laser+ " "+ res[1]);
console.log("colors sending "+res[0]+laser+ " "+ res[1]+ " " + e.target.value);
}
// Lasers
if (res[0] === "noteon" && e.type === "change") {
//console.log(e.target.id);
//console.log(res);
//console.log(res[1] - 24)
newlaser(res[1] - 24);
_WS.send("/" + e.target.id + " " + e.target.value);
//nolaser();
//nofx();
//_WS.send("/" + e.target.id + " " + e.target.value);
//var x = document.getElementById(e.target.id);
//x.value = 1 ;
//laser = res[1] - 24;
//console.log("laser "+laser);
}
</script>
</body>
</html>