Skip to content

GitLab

Commit 7575e5bc authored by Jérémie Garcia's avatar Jérémie Garcia
Browse files

update multiplay and interface

parent fdb6945f
Hide whitespace changes
Inline Side-by-side
WOB/server/interfaces/Trajectoires.html
View file @ 7575e5bc
......@@ -55,13 +55,7 @@
</select>
</form>
<form>
<label for="flip-loop">Loop Mode:</label>
<select name="flip-loop" id="flip-loop" data-role="slider" data-theme="b" data-mini="true" onchange="javascript:Traj.Player.updateLoopMode()">
<option value="off" selected="selected">Off</option>
<option value="on">On</option>
</select>
</form>
<form>
<label for="flip-timeSlider">Show Time Slider:</label>
......@@ -125,9 +119,21 @@
<a onClick="javascript:Traj.View.setCanvasZoom(0.8);" data-role="button" data-theme="a" data-inline="true" style="background: rgba(250, 250, 250, 0.7);"> - </a>
<a onClick="javascript:Traj.View.setCanvasZoom(1.2);" data-role="button" data-theme="a" data-inline="true" style="background: rgba(250, 250, 250, 0.7);"> + </a>
</div>
<div data-role="controlgroup" data-type="vertical">
<a id="playButton" data-role="button" data-theme="a" style="background: rgba(250, 250, 250, 0.7); padding: 5px; width:50px; height:30px; line-height: 30px;">Play</a>
<a id="multiplayButton" data-role="button" data-theme="a" style="background: rgba(250, 250, 250, 0.7);padding: 5px; width:50px;height:30px; line-height: 30px;">Multi</a>
<form>
<label for="flip-loop" style="font-size:small">Loop Mode:</label>
<input type="checkbox" data-role="flipswitch" name="flip-loop" id="flip-loop" data-theme="c"
onchange="javascript:Traj.Player.updateLoopMode();">
<label for="flip-PlayMode" style="font-size:small">MultiPlay:</label>
<input type="checkbox" data-role="flipswitch" name="flip-PlayMode" id="flip-PlayMode" data-theme="d"
onchange="javascript:Traj.Player.updatePlayMode();">
</form>
<div style="height:20px"> </div>
<a id="playButton" data-role="button" data-theme="a" style="background: rgba(250, 250, 250, 0.8); padding: 5px; width:50px; height:30px; line-height: 30px;">Play</a>
</div>
</div>
......
WOB/server/interfaces/css/index.css
View file @ 7575e5bc
......@@ -76,7 +76,7 @@ body {
.canvas-left-overlay {
position: absolute;
top: 30%;
top: 10%;
left: 0;
vertical-align: center;
z-index: 3;
......
WOB/server/interfaces/js/Player.js
View file @ 7575e5bc
......@@ -3,414 +3,122 @@ Traj.Player = {
loopMode : false,
requestId : undefined,
loopID : undefined,
isPlaying : false,
loopID : undefined,
isPlaying : false,
isMulti : false,
play : function() {
this.playCurrentCurve();
},
playCurve : function(curveIdx) {
this.stopCurrentCurve();
Traj.Player.isPlaying = true;
var curve = Traj.Manager.trajectories[curveIdx],
lengthTime = curve.lengthTime(),
pointCoord,
x = curve.X[0],
y = curve.Y[0],
xOld = curve.X[0],
yOld = curve.Y[0],
z = curve.Z[0],
counter = 0,
orientation = [0,0,0],
idx = 0;
Traj.OSC.sendPlay("start");
var begin = new Date().getTime();
// check if the slider is not at the end (or mostly)
// if it is not, change the begin time (if it is, leave it to restart at the begining)
var timeSliderPosition = Traj.Events.getSliderValue();
if (timeSliderPosition < lengthTime-100) {
begin -= timeSliderPosition;
}
var now = new Date().getTime();
pointCoord = Traj.Utils.interpolate(now-begin,curve);
xOld = pointCoord[0];
yOld = pointCoord[1];
(function loop() {
// get time for new frame
now = new Date().getTime() - begin;
counter = (counter + 1) % 2; // can be use to render once of two loops
// actualize time slider
//if (counter ==1) {
Traj.Events.setSliderValue(now);
//}
//find idx
idx = Traj.Utils.findPointIdx(now,curve);
// [sourceNumber, X, Y, Z, t]
pointCoord = Traj.Utils.interpolate(now,curve,idx);
x = pointCoord[0];
y = pointCoord[1];
z = pointCoord[2];
orientation = pointCoord[4];
if (!isNaN(x)&&!isNaN(y)) {
Traj.OSC.streamPoint(curve.sourceNumber,[x,y,z]);
Traj.OSC.sendOrientation(curve.sourceNumber,orientation);
// Traj.OSC.sendSpatMessage( ['source', pointCoord[0], 'xyz',pointCoord[1], pointCoord[2], pointCoord[3]]);
Traj.View.dyn_repaint();
// Traj.Player.repaintPoint(curve,[x,y]); // paint point
Traj.Player.repaintPointWithOrientation(curve,[x,y], orientation); // paint point
Traj.Player.repaintCurve(curve,idx,idx-1); // paint large curve
Traj.Events.setZSliderValue(z);
}
// test if the curve is ended and if loop is activated
if (now > lengthTime) {
Traj.OSC.sendPlay("end");
Traj.View.traj_repaint();
if (Traj.Player.loopMode) {
Traj.Player.playCurrentCurve();
return;
}
Traj.Player.stopCurrentCurve();
Traj.Player.isPlaying = false;
return;
}
Traj.Player.requestId = requestAnimationFrame(loop);
}())
},
//This methods plays the curves from their indexes
playCurves : function (indexes){
this.stopCurrentCurve();
this.stopPlayActions();
Traj.Player.isPlaying = true;
var curvesIdx = indexes;
var curveArray = [],
lengthTimeArray = [],
pointCoordArray = [],
xArray = [],
yArray = [],
xOldArray = [],
yOldArray = [],
idxArray = [],
idxOldArray = [],
counter = 0;
for (var k=0; k<curvesIdx.length;k++) {
var curve = Traj.Manager.trajectories[curvesIdx[k]];
if(typeof curve !==undefined){
var lengthTime = curve.lengthTime(),
pointCoord,
x = curve.X[0],
y = curve.Y[0],
xOld = curve.X[0],
yOld = curve.Y[0],
idx = 0,
idxOld = 0;
curveArray[k] = curve;
pointCoordArray[k] = pointCoord;
xArray[k] = x;
yArray[k] = y;
xOldArray[k] = xOld;
yOldArray[k] = yOld;
idxArray[k] = idx;
idxOldArray[k] = idxOld;
}
}
var begin = new Date().getTime();
// selection de la courbe la plus longue (pour le timeSlider)
//Find longest curves for the time slider range
var longestCurveIdx = Traj.Manager.longestCurveIdxOfPlayedCurve(indexes);
var maxDuration = Traj.Manager.trajectories[longestCurveIdx].getDuration();
Traj.Manager.selectCurve(longestCurveIdx);
var now = new Date().getTime();
for (var k=0; k<curvesIdx.length;k++) {
pointCoordArray[k] = Traj.Utils.interpolate(now - begin,curveArray[k]);
xOldArray[k] = pointCoordArray[k][0];
yOldArray[k] = pointCoordArray[k][1];
}
// check si le curseur du player est à la fin ou non et ajuste le begin de lecture
//time variables
var begin = new Date().getTime(),
now;
// check if the slider is not at the end (or near)
// if it is not, change the begin time (if it is, leave it to restart at the begining)
var timeSliderPosition = Traj.Events.getSliderValue();
if (timeSliderPosition < lengthTime - 100) {
if (timeSliderPosition < maxDuration - 100) {
begin -= timeSliderPosition;
}
Traj.OSC.sendPlay("start");
Traj.OSC.sendPlay("start");
(function loopMulti() {
// get time for new frame
now = new Date().getTime() - begin;
counter = (counter + 1) % 2;
// clear dyn canvas = large point
Traj.View.dyn_repaint();
// actualize time slider
// update the time slider
Traj.Events.setSliderValue(now);
// clear dyn canvas
Traj.View.dyn_repaint();
for (var k=0; k<pointCoordArray.length;k++) {
if (lengthTimeArray[k]) {
idxArray[k] = Traj.Utils.findPointIdx(now,curveArray[k]);
pointCoordArray[k] = Traj.Utils.interpolate(now,curveArray[k],idxArray[k]);
xArray[k] = pointCoordArray[k][0];
yArray[k] = pointCoordArray[k][1];
if (!isNaN(xArray[k])&&!isNaN(yArray[k])) {
//if (counter == 1) {
//ussing Spat formatting source ID xyz x y z
var pointCoord = pointCoordArray[k];
Traj.OSC.sendSpatMessage( ['source', pointCoord[0], 'xyz',pointCoord[1], pointCoord[2], pointCoord[3]]);
// Traj.OSC.sendPosxyzMsg(pointCoordArray[k]);
//}
Traj.Player.repaintPoint(curveArray[k],[xArray[k],yArray[k]]);
xOldArray[k] = xArray[k];
yOldArray[k] = yArray[k];
Traj.Player.repaintCurve(curveArray[k],idxArray[k],idxOldArray[k]);
idxOldArray[k] = idxArray[k];
}
// test if the curve is ended
if (now > lengthTimeArray[k]) {
curveArray.splice(k,1);
lengthTimeArray.splice(k,1);
pointCoordArray.splice(k,1);
xArray.splice(k,1);
yArray.splice(k,1);
xOldArray.splice(k,1);
yOldArray.splice(k,1);
}
}
}
if (xOldArray.length<1) {
Traj.OSC.sendPlay("end");
Traj.View.traj_repaint();
if (Traj.Player.loopMode) {
Traj.Player.isPlaying = false;
//stop if the current time is less than the whole duration
if(now > maxDuration){
//if loop mode then relaucnh the palying
if (Traj.Player.loopMode) {
Traj.Player.playCurves(indexes);
return;
//Traj.Player.loopID = setTimeout(function() {Traj.Player.playCurrentCurve();},500);
}
Traj.Player.stopCurrentCurve();
Traj.Player.isPlaying = false;
return;
}
Traj.Player.requestId = requestAnimationFrame(loopMulti);
}())
},
Traj.Player.stopPlayActions();
return;
} else {
playAllCurve : function() {
this.stopCurrentCurve();
//process each curve
for (var k=0; k<indexes.length;k++) {
Traj.Player.isPlaying = true;
var multiplayButton = document.getElementById('multiplayButton');
multiplayButton.innerHTML = 'Pause';
var curvesIdx = Traj.Manager.playedCurves; // A definir dans Manager
var curveArray = [],
lengthTimeArray = [],
pointCoordArray = [],
xArray = [],
yArray = [],
xOldArray = [],
yOldArray = [],
idxArray = [],
idxOldArray = [],
counter = 0;
for (var k=0; k<curvesIdx.length;k++) {
var curve = Traj.Manager.trajectories[curvesIdx[k]],
lengthTime = curve.lengthTime(),
pointCoord,
x = curve.X[0],
y = curve.Y[0],
xOld = curve.X[0],
yOld = curve.Y[0],
idx = 0,
idxOld = 0;
curveArray[k] = curve;
lengthTimeArray[k] = lengthTime;
pointCoordArray[k] = pointCoord;
xArray[k] = x;
yArray[k] = y;
xOldArray[k] = xOld;
yOldArray[k] = yOld;
idxArray[k] = idx;
idxOldArray[k] = idxOld;
}
var curve = Traj.Manager.trajectories[indexes[k]];
Traj.OSC.sendPlay("start");
var begin = new Date().getTime();
// check si le curseur du player est à la fin ou non et ajuste le begin de lecture
var timeSliderPosition = Traj.Events.getSliderValue();
if (timeSliderPosition < lengthTime - 100) {
begin -= timeSliderPosition;
}
// selection de la courbe la plus longue (pour le timeSlider)
var longestCurveIdx = Traj.Manager.longestCurveIdxOfPlayedCurve();
Traj.Manager.selectCurve(longestCurveIdx);
var now = new Date().getTime();
for (var k=0; k<curvesIdx.length;k++) {
pointCoordArray[k] = Traj.Utils.interpolate(now - begin,curveArray[k]);
xOldArray[k] = pointCoordArray[k][0];
yOldArray[k] = pointCoordArray[k][1];
}
//do it only if the curve is not finished.
if(!(now > curve.getDuration())) {
(function loopMulti() {
// get time for new frame
now = new Date().getTime() - begin;
counter = (counter + 1) % 2;
var idx = Traj.Utils.findPointIdx(now,curve),
pointCoord = Traj.Utils.interpolate(now,curve,idx),
x = pointCoord[0],
y = pointCoord[1],
z = pointCoord[2],
orientation = pointCoord[4];
// clear dyn canvas = large point
Traj.View.dyn_repaint();
if (!isNaN(x)&&!isNaN(y)) {
// actualize time slider
Traj.Events.setSliderValue(now);
//Send OSC messages
Traj.OSC.streamPoint(curve.sourceNumber,[x,y,z]);
Traj.OSC.sendOrientation(curve.sourceNumber,orientation);
for (var k=0; k<pointCoordArray.length;k++) {
if (lengthTimeArray[k]) {
idxArray[k] = Traj.Utils.findPointIdx(now,curveArray[k]);
pointCoordArray[k] = Traj.Utils.interpolate(now,curveArray[k],idxArray[k]);
xArray[k] = pointCoordArray[k][0];
yArray[k] = pointCoordArray[k][1];
if (!isNaN(xArray[k])&&!isNaN(yArray[k])) {
//if (counter == 1) {
//ussing Spat formatting source ID xyz x y z
var pointCoord = pointCoordArray[k];
Traj.OSC.sendSpatMessage( ['source', pointCoord[0], 'xyz',pointCoord[1], pointCoord[2], pointCoord[3]]);
// Traj.OSC.sendPosxyzMsg(pointCoordArray[k]);
//}
Traj.Player.repaintPoint(curveArray[k],[xArray[k],yArray[k]]);
xOldArray[k] = xArray[k];
yOldArray[k] = yArray[k];
Traj.Player.repaintCurve(curveArray[k],idxArray[k],idxOldArray[k]);
idxOldArray[k] = idxArray[k];
}
//Update the display (paint playHead and curve segment)
Traj.Player.repaintPointWithOrientation(curve,[x,y], orientation);
Traj.Player.repaintCurve(curve,idx,idx-1);
// test if the curve is ended
if (now > lengthTimeArray[k]) {
curveArray.splice(k,1);
lengthTimeArray.splice(k,1);
pointCoordArray.splice(k,1);
xArray.splice(k,1);
yArray.splice(k,1);
xOldArray.splice(k,1);
yOldArray.splice(k,1);
//Update the Z-slider value for the longest curve only
if(indexes[k]===longestCurveIdx){
Traj.Events.setZSliderValue(z);
}
}
}
}
}
if (xOldArray.length<1) {
Traj.OSC.sendPlay("end");
Traj.View.traj_repaint();
if (Traj.Player.loopMode) {
Traj.Player.isPlaying = false;
Traj.Player.playAllCurve();
return;
//Traj.Player.loopID = setTimeout(function() {Traj.Player.playCurrentCurve();},500);
}
Traj.Player.stopCurrentCurve();
Traj.Player.isPlaying = false;
return;
}
Traj.Player.requestId = requestAnimationFrame(loopMulti);
Traj.Player.requestId = requestAnimationFrame(loopMulti);
}
}())
},
playCurrentCurve : function() {
var curveIdx = Traj.Manager.currentCurveIndex,
curve = Traj.Manager.trajectories[curveIdx];
if(typeof curve != 'undefined'){
Traj.View.dyn_ctx.lineWidth = 5;
Traj.View.dyn_ctx.fillStyle = curve.color;
Traj.View.dyn_ctx.strokeStyle = curve.color;
Traj.View.dyn_ctx.globalAlpha = Traj.View.CURVE_ACTIVE_ALPHA;
Traj.View.traj_ctx.lineWidth = Traj.View.CURVE_ACTIVE_STROKE_SIZE *2.5;
Traj.View.traj_ctx.strokeStyle = curve.color;
this.playCurve(curveIdx);
}
},
stopCurrentCurve : function() {
stopPlayActions : function() {
if (this.isPlaying) {
if (this.requestId) {
cancelAnimationFrame(this.requestId);
this.requestId = undefined;
}
Traj.View.dyn_repaint();
// Traj.View.dyn_repaint();
Traj.Player.isPlaying = false;
Traj.OSC.sendPlay("end");
var playButton = document.getElementById('playButton');
var multiplayButton = document.getElementById('multiplayButton');
playButton.innerHTML = 'Play';
multiplayButton.innerHTML = 'Multi';
}
},
repaintPoint : function(curve,point) {
var dyn_ctx = Traj.View.dyn_ctx;
dyn_ctx.strokeStyle = curve.color;
dyn_ctx.lineWidth = 5 ;
if (point) {
var pos = Traj.Utils.convertUnitsIntoCanvasPos(point);
//draw large point
Traj.View.drawPoint(dyn_ctx,pos , 8);
Traj.View.drawPoint(dyn_ctx,pos , 18);
}
},
repaintPointWithOrientation : function(curve,point,orientation) {
var dyn_ctx = Traj.View.dyn_ctx;
dyn_ctx.strokeStyle = curve.color;
if (point && orientation) {
var pos = Traj.Utils.convertUnitsIntoCanvasPos(point);
Traj.View.drawOrientationForPoint(dyn_ctx, point, orientation);
//draw large point
var pos = Traj.Utils.convertUnitsIntoCanvasPos(point);
Traj.View.drawPoint(dyn_ctx,pos , 18);
}
},
repaintCurve : function(curve,index,lastIndex) {
var dyn_ctx = Traj.View.dyn_ctx,
pos,
last_pos;
pos,
last_pos;
dyn_ctx.lineWidth = Traj.View.CURVE_ACTIVE_STROKE_SIZE *1.3;
dyn_ctx.strokeStyle = curve.color;
......@@ -434,8 +142,14 @@ Traj.Player = {
////////////////////////////////////
updateLoopMode : function(){
Traj.Player.loopMode = document.getElementById("flip-loop").value == 'on';
Traj.Player.loopMode = document.getElementById("flip-loop").value === 'on';
},
updatePlayMode : function(){
Traj.Player.isMulti = document.getElementById("flip-PlayMode").value === 'on';
Traj.View.repaintAll();
},
}
......
WOB/server/interfaces/js/TimedCurve.js
View file @ 7575e5bc
......@@ -193,7 +193,7 @@ TimedCurve.prototype.cloneNoPoints = function() {
return clone;
}
TimedCurve.prototype.lengthTime = function() {
TimedCurve.prototype.getDuration = function() {
var lengt = this.X.length-1;
var time = this.t[lengt];
return time;
......
WOB/server/interfaces/js/Utils.js
View file @ 7575e5bc
......@@ -9,7 +9,7 @@ Traj.Utils = {
golden_ratio_conjugate : 0.618033988749895,
//events utilities
//events utilities for touch/mouse events
getStartEventName : function(){
return Traj.onmobile ? 'touchstart' : 'mousedown';
},
......@@ -187,6 +187,7 @@ Traj.Utils = {
}
},
//returns an array with [x,y,z,t,[alpha,beta,gamma]]
interpolate : function(now,curve,idx) {
if(typeof(idx)=="undefined"){
var idx = Traj.Utils.findPointIdx(now,curve);
......
WOB/server/interfaces/js/View.js
View file @ 7575e5bc
......@@ -44,8 +44,8 @@ Traj.View = {
FIRST_POINT_SIZE : 5, //pix
CURVE_STROKE_SIZE : 2,
CURVE_ACTIVE_STROKE_SIZE : 4,
CURVE_ALPHA : 0.4,
CURVE_ACTIVE_STROKE_SIZE : 3,
CURVE_ALPHA : 0.35,
CURVE_ACTIVE_ALPHA : 0.9,
//Events variables...
......@@ -123,7 +123,7 @@ Traj.View = {
ctx.stroke();
},
drawCurve : function(ctx, curve, index, linewidth, alpha,withPoint) {
drawCurve : function(ctx, curve, index, linewidth, alpha, withPoint) {
ctx.lineWidth = linewidth;
ctx.fillStyle = curve.color;
ctx.strokeStyle = curve.color;
......@@ -146,7 +146,7 @@ Traj.View = {
if (withPoint) {
for (i = 1; i < curve.X.length; i++) {
pos = Traj.Utils.convertUnitsIntoCanvasPos([curve.X[i], curve.Y[i]]);
this.drawPoint(ctx, pos, (linewidth*0.9));
this.drawPoint(ctx, pos, (linewidth*0.5));
}
}
ctx.globalAlpha = 1;
......@@ -155,18 +155,17 @@ Traj.View = {
speaker_image : new Image(),
speaker_image_width : 26,
//draw the points of the curve that have an orientation defined.