forked from protonphoton/LJ
671 lines
21 KiB
HTML
671 lines
21 KiB
HTML
<!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">
|
|
|
|
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>
|