Skip to content

GitLab

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

update with orientation ongoing

parent cde2e341
Expand all Hide whitespace changes
Inline Side-by-side
WOB/server/interfaces/Trajectoires.html
View file @ ff492b9c
......@@ -44,19 +44,12 @@
<h1>Settings</h1>
<label> Undo: </label>
<div>
<a onClick="javascript:Traj.State.undo();" data-role="button" data-theme="a" data-icon="back" data-inline="true"></a>
</div>
<label>Speakers Pos: </label>
<input type="number" id="speaker_dist" name="distHP" value="1" onchange="javascript:Traj.View.updateHpDistance()" data-inline="true" />
<label>Speakers Pos: </label>
<input type="number" id="speaker_dist" name="distHP" value="1" data-mini="true" onchange="javascript:Traj.View.updateHpDistance()" data-inline="true" />
<form>
<label for="flip-curvesinback">Draw Curves in Background:</label>
<select name="flip-curvesinback" id="flip-curvesinback" data-role="slider" data-theme="b" onchange="javascript:Traj.View.updateDrawCurvesInBackground()">
<select name="flip-curvesinback" id="flip-curvesinback" data-role="slider" data-theme="b" data-mini="true" onchange="javascript:Traj.View.updateDrawCurvesInBackground()">
<option value="off">No</option>
<option value="on" selected="selected">Yes</option>
</select>
......@@ -64,14 +57,7 @@
<form>
<label for="flip-loop">Loop Mode:</label>
<select name="flip-loop" id="flip-loop" data-role="slider" data-theme="b" onchange="javascript:Traj.Player.updateLoopMode()">
<option value="off" selected="selected">Off</option>
<option value="on">On</option>
</select>
</form>
<form>
<label for="flip-orientation">Stream Orientation:</label>
<select name="flip-orientation" id="flip-orientation" data-role="slider" data-theme="b" onchange="javascript:Traj.Events.updateOrientationMode()">
<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>
......@@ -79,7 +65,7 @@
<form>
<label for="flip-timeSlider">Show Time Slider:</label>
<select name="flip-timeSlider" id="flip-timeSlider" data-role="slider" data-theme="b" onchange="javascript:Traj.Events.updateTimeSliderMode()">
<select name="flip-timeSlider" id="flip-timeSlider" data-role="slider" data-theme="b" data-mini="true" onchange="javascript:Traj.Events.updateTimeSliderMode()">
<option value="off">Off</option>
<option value="on" selected="selected">On</option>
</select>
......@@ -87,7 +73,7 @@
<form>
<label for="flip-zSlider">Show Z Slider:</label>
<select name="flip-zSlider" id="flip-zSlider" data-role="slider" data-theme="b" onchange="javascript:Traj.View.updateZSliderMode()">
<select name="flip-zSlider" id="flip-zSlider" data-role="slider" data-theme="b" data-mini="true" onchange="javascript:Traj.View.updateZSliderMode()">
<option value="off" selected="selected">Off</option>
<option value="on">On</option>
</select>
......@@ -130,6 +116,10 @@
<div style="margin-top: 40px" unselectable="on" class="unselectable" >Hold to draw a new curve</div>
</div>
<div id='feedbackDisplay' data-role="none">
<div style="margin-top: 40px" unselectable="on" class="unselectable" > </div>
</div>
<div class="canvas-left-overlay" id="playDiv">
<div data-role="controlgroup" data-type="horizontal" >
<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>
......@@ -161,19 +151,25 @@
<input type="hidden" class="timeSlider" value="0" />
</div>
<div id="sessionDiv">
<a id="lblCurrentSession" data-role="button" data-mini="true" data-inline="true" data-inline="true">0</a>
<div id="sessionDivOverCanvas">
<a onClick="javascript:Traj.Session.selectPreviousSession();" data-inline="true" data-role="button" data-iconpos="notext" data-icon="arrow-l"> Previous </a>
<a onClick="javascript:Traj.Session.selectNextSession();" data-inline="true" data-role="button" data-iconpos="notext" data-icon="arrow-r"> Next </a>
<a onClick="javascript:Traj.Session.newSession();" data-inline="true" data-role="button" data-icon="plus" data-iconpos="notext"> New </a>
<a onClick="javascript:Traj.Session.deleteSelectedSession();" data-inline="true" data-role="button" data-icon="delete" data-iconpos="notext">Delete</a>
<div id=footer data-role="footer">
<div id="sessionDiv">
<a id="lblCurrentSession" data-role="button" data-mini="true" data-inline="true" data-inline="true">0</a>
<div id="sessionDivOverCanvas">
<a onClick="javascript:Traj.Session.selectPreviousSession();" data-inline="true" data-role="button" data-iconpos="notext" data-icon="arrow-l"> Previous </a>
<a onClick="javascript:Traj.Session.selectNextSession();" data-inline="true" data-role="button" data-iconpos="notext" data-icon="arrow-r"> Next </a>
<a onClick="javascript:Traj.Session.newSession();" data-inline="true" data-role="button" data-icon="plus" data-iconpos="notext"> New </a>
<a onClick="javascript:Traj.Session.deleteSelectedSession();" data-inline="true" data-role="button" data-icon="delete" data-iconpos="notext">Delete</a>
</div>
</div>
<div class="center" id="orientation">
<input type="button" value="On" id="onoff" onclick="onoff();">
</div>
</div>
<div id=footer data-role="footer">
<div class="right" id="options-div">
<a href="#" onClick="javascript:Traj.Session.exportCurrentCurve();" data-mini="true" data-role="button">Export</a>
<a href="#" onClick="javascript:Traj.Events.OrientationRecording();" data-inline="true" data-mini="true" data-role="button" id="OrientationButton" data-theme='c'>Set Orientation</a>
<a href="#" onClick="javascript:Traj.Session.exportCurrentCurve();" data-inline="true" data-mini="true" data-role="button">Send</a>
</div>
</div>
<!-- /footer -->
......
WOB/server/interfaces/css/index.css
View file @ ff492b9c
......@@ -93,7 +93,6 @@ body {
opacity: 0.7;
}
/* NEW */
.sourceButton{
margin : -3px;
padding: 0;
......@@ -147,6 +146,7 @@ body {
position: absolute;
width: 100%;
bottom: 0;
height:40px;
}
.right {
......@@ -166,8 +166,8 @@ body {
.left {
position: absolute;
left: 0;
opacity: 0.8;
z-index: 5;
margin: 0px;
}
a.curveMenuButton {
......@@ -211,9 +211,7 @@ a.curveMenuButton {
}
#sessionDiv {
position: absolute;
left: 0px;
bottom :0;
z-index: 4;
}
......@@ -240,10 +238,6 @@ a.curveMenuButton {
padding-top: 5px;
}
#footer {
height:40px;
}
#spaceStretchDiv > input {
width: 50px;
......@@ -277,6 +271,18 @@ a.curveMenuButton {
text-align: center;
}
#feedbackDisplay {
position: absolute;
background-color: rgba(250,250,250,0.6);
top:50px;
left:5px;
width:120px;
height: 20px;
z-index: 4;
font-size: 20px;
text-align: left;
}
#contextMenu{
position:absolute;
height: 30px;
......
WOB/server/interfaces/js/OSC.js
View file @ ff492b9c
......@@ -116,7 +116,7 @@ Traj.OSC = {
sendOrientation : function(msg){
Traj.OSC.sendSpatMessage(['source',Traj.Manager.currentSource, 'yaw', msg[0]]);
//Traj.OSC.sendSpatMessage(['source', Traj.Manager.currentSource, 'pitch', msg[1]]);
// Traj.OSC.sendSpatMessage(['source', Traj.Manager.currentSource, 'roll', msg[2]]);
//Traj.OSC.sendSpatMessage(['source', Traj.Manager.currentSource, 'roll', msg[2]]);
},
sendNewTraj : function(msg){
......
WOB/server/interfaces/js/Player.js
View file @ ff492b9c
......@@ -24,21 +24,22 @@ Traj.Player = {
yOld = curve.Y[0],
z = curve.Z[0],
counter = 0,
idx = 0,
idxOld = 0;
idx = 0;
Traj.OSC.sendPlay("start");
var begin = new Date().getTime();
var timeSliderPosition = Traj.Events.getSliderValue(); // check if the slider is not at the end (or mostly)
if (timeSliderPosition < lengthTime-100) { // if it is not, change the begin time (if it is, leave it to restart at the begining)
// 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[1];
yOld = pointCoord[2];
xOld = pointCoord[0];
yOld = pointCoord[1];
(function loop() {
// get time for new frame
......@@ -54,9 +55,9 @@ Traj.Player = {
// [sourceNumber, X, Y, Z, t]
pointCoord = Traj.Utils.interpolate(now,curve,idx);
x = pointCoord[1];
y = pointCoord[2];
z = pointCoord[3];
x = pointCoord[0];
y = pointCoord[1];
z = pointCoord[2];
if (!isNaN(x)&&!isNaN(y)) {
......@@ -69,11 +70,8 @@ Traj.Player = {
// clear dyn canvas = large point
Traj.View.dyn_repaint();
Traj.Player.repaintPoint(curve,[x,y]); // paint point
xOld = x;
yOld = y;
Traj.Player.repaintCurve(curve,idx,idxOld); // paint large curve
idxOld = idx;
Traj.Player.repaintCurve(curve,idx,idx-1); // paint large curve
Traj.Events.setZSliderValue(z);
}
......@@ -127,8 +125,7 @@ Traj.Player = {
idxOld = 0;
curveArray[k] = curve;
lengthTimeArray[k] = lengthTime;
pointCoordArray[k] = pointCoord;
pointCoordArray[k] = pointCoord;
xArray[k] = x;
yArray[k] = y;
xOldArray[k] = xOld;
......@@ -139,26 +136,26 @@ Traj.Player = {
}
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(indexes);
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][1];
yOldArray[k] = pointCoordArray[k][2];
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
var timeSliderPosition = Traj.Events.getSliderValue();
if (timeSliderPosition < lengthTime - 100) {
begin -= timeSliderPosition;
}
Traj.OSC.sendPlay("start");
(function loopMulti() {
// get time for new frame
now = new Date().getTime() - begin;
......@@ -174,8 +171,8 @@ Traj.Player = {
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][1];
yArray[k] = pointCoordArray[k][2];
xArray[k] = pointCoordArray[k][0];
yArray[k] = pointCoordArray[k][1];
if (!isNaN(xArray[k])&&!isNaN(yArray[k])) {
//if (counter == 1) {
......@@ -282,8 +279,8 @@ Traj.Player = {
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][1];
yOldArray[k] = pointCoordArray[k][2];
xOldArray[k] = pointCoordArray[k][0];
yOldArray[k] = pointCoordArray[k][1];
}
(function loopMulti() {
......@@ -301,8 +298,8 @@ Traj.Player = {
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][1];
yArray[k] = pointCoordArray[k][2];
xArray[k] = pointCoordArray[k][0];
yArray[k] = pointCoordArray[k][1];
if (!isNaN(xArray[k])&&!isNaN(yArray[k])) {
//if (counter == 1) {
......
WOB/server/interfaces/js/TimedCurve.js
View file @ ff492b9c
......@@ -8,6 +8,7 @@ function TimedCurve(source) {
this.Y = [];
this.Z = [];
this.t = [];
this.orientation = [];
this.color = Traj.Utils.getColorSource(source) || Traj.Utils.getColorSource(1);
this.sourceNumber = source || Number(1);
}
......@@ -22,7 +23,14 @@ TimedCurve.prototype.addTimedPoint = function (x, y, z, t) {
this.X.push(x);
this.Y.push(y);
this.Z.push(z);
this.t.push(Math.floor(t));
this.t.push(Math.floor(t))
this.orientation.push([270,0,0]);
}
// write points into currentCurve object
TimedCurve.prototype.setOrientationAtIndex = function (orientation, idx) {
this.orientation[idx] = orientation;
}
TimedCurve.prototype.spaceScale = function (factor) {
......@@ -33,7 +41,7 @@ TimedCurve.prototype.spaceScale = function (factor) {
}
}
TimedCurve.prototype.sapceScaleAxis = function(factor,vectorAxis,pointAxis) {
TimedCurve.prototype.spaceScaleAxis = function(factor,vectorAxis,pointAxis) {
var point = [],
distance =0,
dirVector =[],
......@@ -48,7 +56,7 @@ TimedCurve.prototype.sapceScaleAxis = function(factor,vectorAxis,pointAxis) {
}
}
TimedCurve.prototype.sapceScaleAxisRange = function(factor,vectorAxis,pointAxis,pointsLine) {
TimedCurve.prototype.spaceScaleAxisRange = function(factor,vectorAxis,pointAxis,pointsLine) {
var point = [],
distance =0,
dirVector =[],
......@@ -136,6 +144,7 @@ TimedCurve.prototype.translate = function(x,y,z) {
}
}
//TODO: change or not the orientation?
TimedCurve.prototype.rotate = function(center,angle) {
var newXY,
X,
......@@ -190,3 +199,17 @@ TimedCurve.prototype.getDistanceToPoint = function(pos) {
}
return distance;
}
TimedCurve.prototype.getClosestPointIndex = function(pos) {
var distance = Infinity,
tmp, idx = 0;
for (var k=0;k<this.X.length;k++) {
tmp = Traj.Utils.distanceBtwPoints([this.X[k],this.Y[k]],pos);
if (tmp<distance) {
distance = tmp;
idx = k;
}
}
return idx;
}
WOB/server/interfaces/js/Utils.js
View file @ ff492b9c
......@@ -136,7 +136,7 @@ Traj.Utils = {
simplifyCurve : function(curve,tolerance) {
var points = [],
pt = {};
pt = {};
for (var k=0;k<curve.X.length;k++) {
var pt = {};
......@@ -157,25 +157,25 @@ Traj.Utils = {
return newCurve;
},
findPointsIdx : function(maxTime,lastPoint,curve) {
var timeSearch = curve.t[lastPoint],
pointIdx = lastPoint,
pointsIdx = [];
findPointsIdx : function(maxTime,idx,curve) {
var timeSearch = curve.t[idx],
pointIdx = idx,
pointsIdx = [];
while (timeSearch < maxTime) {
pointIdx = pointIdx+1;
timeSearch = curve.t[pointIdx];
}
var nbPoints = pointIdx-1 - lastPoint;
var nbPoints = pointIdx-1 - idx;
var points = 0;
for (points=1; points<nbPoints+1;points++){
pointsIdx.push(lastPoint+points);
pointsIdx.push(idx+points);
}
return pointsIdx;
},
findPointIdx : function(time,curve) {
var timeSearch = 0,
pointIdx = 0;
pointIdx = 0;
while (timeSearch <= time ) {
pointIdx = pointIdx+1;
timeSearch = curve.t[pointIdx];
......@@ -187,44 +187,43 @@ Traj.Utils = {
}
},
interpolate : function(now,curve,lastPoint) {
if (typeof(lastPoint) == 'undefined') {
var lastPoint = Traj.Utils.findPointIdx(now,curve);
interpolate : function(now,curve,idx) {
if(typeof(idx)=="undefined"){
var idx = Traj.Utils.findPointIdx(now,curve);
}
var lastTime = curve.t[idx],
nextTime = 0, x, y, z;
if (curve.t[idx+1]!==undefined) {
nextTime = curve.t[idx+1]
var diffTime = nextTime - lastTime;
x = curve.X[idx]*(nextTime-now)/diffTime + curve.X[idx+1]*(now-lastTime)/diffTime;
y = curve.Y[idx]*(nextTime-now)/diffTime + curve.Y[idx+1]*(now-lastTime)/diffTime;
z = curve.Z[idx]*(nextTime-now)/diffTime + curve.Z[idx+1]*(now-lastTime)/diffTime;
} else {
x = curve.X[idx];
y = curve.Y[idx];
z = curve.Z[idx];
}
var lastTime = curve.t[lastPoint],
nextTime = 0;
if (curve.t[lastPoint+1]!==undefined) {
nextTime = curve.t[lastPoint+1]
var diffTime = nextTime - lastTime;
var x = curve.X[lastPoint]*(nextTime-now)/diffTime + curve.X[lastPoint+1]*(now-lastTime)/diffTime;
var y = curve.Y[lastPoint]*(nextTime-now)/diffTime + curve.Y[lastPoint+1]*(now-lastTime)/diffTime;
var z = curve.Z[lastPoint]*(nextTime-now)/diffTime + curve.Z[lastPoint+1]*(now-lastTime)/diffTime;
} else {
var x = curve.X[lastPoint];
var y = curve.Y[lastPoint];
var z = curve.Z[lastPoint];
}
var pointCoord = [];
pointCoord.push(curve.sourceNumber);
pointCoord.push(x);
pointCoord.push(y);
pointCoord.push(z);
pointCoord.push(now);
var pointCoord = [];
pointCoord.push(x);
pointCoord.push(y);
pointCoord.push(z);
pointCoord.push(now);
return pointCoord;
return pointCoord;
},
rotate : function(cx, cy, x, y, angle) {
var radians = (Math.PI / 180) * angle,
cos = Math.cos(radians),
sin = Math.sin(radians),
nx = (cos * (x - cx)) - (sin * (y - cy)) + cx,
ny = (sin * (x - cx)) + (cos * (y - cy)) + cy;
cos = Math.cos(radians),
sin = Math.sin(radians),
nx = (cos * (x - cx)) - (sin * (y - cy)) + cx,
ny = (sin * (x - cx)) + (cos * (y - cy)) + cy;
return [nx, ny];
},
sign : function(x) {
return x/Math.abs(x);
},
......
WOB/server/interfaces/js/View.js
View file @ ff492b9c
......@@ -40,14 +40,6 @@ Traj.View = {
col = Traj.Utils.HSVtoRGB(h, 0.95, 0.68);
this.default_colors[i] = Traj.Utils.rgbToHex(col);
}
/*
for(var i = 0; i< Traj.Manager.NB_SOURCES;i++){
var h = (this.start_hue + i*(1/(1+ Traj.Manager.NB_SOURCES)))%1,
col = Traj.Utils.HSVtoRGB(h, 0.95, 0.68);
this.default_colors[i] = Traj.Utils.rgbToHex(col);
}
*/
},
FIRST_POINT_SIZE : 5, //pix
......@@ -97,6 +89,13 @@ Traj.View = {
this.dyn_ctx = initializeCanvasContext(this.dyn_canvas,canvas_width,canvas_height);
this.current_ctx = initializeCanvasContext(this.current_canvas,canvas_width,canvas_height);
//loads the speaker image as a sprite
this.speaker_image.onload = function() {
Traj.View.current_repaint();
};
this.speaker_image.src = 'css/speaker_icon.png';
this.minWH = Math.min(this.dyn_canvas.width, this.dyn_canvas.height);
this.pixToValue = this.scaleFactor / this.minWH;
......@@ -153,6 +152,22 @@ Traj.View = {
ctx.globalAlpha = 1;
},
speaker_image : new Image(),
drawOrientationForCurve : function(ctx, curve, index, linewidth, alpha, withPoint) {
var width = 26;
for (var i = 0; i < curve.orientation.length; i++) {
var orientation = curve.orientation[i],
alpha = orientation[0] *Math.PI / 180,
pos = Traj.Utils.convertUnitsIntoCanvasPos([curve.X[i], curve.Y[i]]);
ctx.save();
ctx.translate(pos[0]-width/2,pos[1]-width/2);
ctx.rotate(alpha);
ctx.drawImage(this.speaker_image,0,0, width, width);
ctx.restore();
};
},
//////////////////////////////////
//////// BACKGROUND DRAWING///////
//////////////////////////////////
......@@ -209,6 +224,55 @@ Traj.View = {
this.bg_ctx.font = '10px Georgia';
var pos = Traj.Utils.convertUnitsIntoCanvasPos([1, 0]);
this.bg_ctx.fillText(1, pos[0], pos[1]);
pos = Traj.Utils.convertUnitsIntoCanvasPos([-1, 0]);
this.bg_ctx.fillText(-1, pos[0], pos[1]);
pos = Traj.Utils.convertUnitsIntoCanvasPos([0, 1]);
this.bg_ctx.fillText(1, pos[0], pos[1]);
pos = Traj.Utils.convertUnitsIntoCanvasPos([0, -1]);
this.bg_ctx.fillText(-1, pos[0], pos[1]);
},
//draw the axis
drawCircularGrid : function() {
this.bg_ctx.globalAlpha = 0.6;
this.bg_ctx.beginPath();
this.bg_ctx.strokeStyle = this.COLOR_SCALE;
this.bg_ctx.lineWidth = 1.2;
var radius = 1; //in Traj Units
var radius_pix = radius * (1 / this.pixToValue);
var center_x = Math.floor(this.traj_canvas.width / 2);
var center_y = Math.floor(this.traj_canvas.height / 2);
var max_radius_pix = (center_x< center_y)? center_y : center_x;
//draw from center with a step
for (var radius = radius_pix; (radius <= max_radius_pix) && (radius < 5*radius_pix); radius += radius_pix) {
this.bg_ctx.arc(center_x, center_y, radius, 0, 2 * Math.PI, false);
}
this.bg_ctx.stroke();
//draw the axis
this.bg_ctx.globalAlpha = 1;
this.bg_ctx.beginPath();
this.bg_ctx.strokeStyle = this.COLOR_SCALE;
this.bg_ctx.lineWidth = 1;
this.bg_ctx.moveTo(Math.floor(this.traj_canvas.width / 2), 0);
this.bg_ctx.lineTo(Math.floor(this.traj_canvas.width / 2), this.traj_canvas.height);
this.bg_ctx.moveTo(0, Math.floor(this.traj_canvas.height / 2));
this.bg_ctx.lineTo(this.traj_canvas.width, Math.floor(this.traj_canvas.height / 2));
this.bg_ctx.stroke();
//draw labels for 1 units
this.bg_ctx.fillStyle = 'black';
this.bg_ctx.font = '10px Georgia';
var pos = Traj.Utils.convertUnitsIntoCanvasPos([1, 0]);