2020-09-19 12:28:56 +00:00
<!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" > < / 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" >
2020-10-04 17:46:45 +00:00
var LJ = 'ws://0.0.0.0:9001/'
2020-09-19 12:28:56 +00:00
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 () {
2020-09-27 23:04:05 +00:00
_WS.showline1('< span style = "color: red;" > LJ DISCONNECTED< / span > ');
2020-09-19 12:28:56 +00:00
},
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;
2020-09-27 23:04:05 +00:00
case "/lack/":
console.log("/lack "+res[1])
document.getElementById(res[0].slice(1)).value = res[1];
break;
case "/lstt/":
console.log("/lstt "+res[1])
document.getElementById(res[0].slice(1)).value = res[1];
break;
2020-09-19 12:28:56 +00:00
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 >
