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

update multiplay and interface

parent fdb6945f
......@@ -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>
......
......@@ -76,7 +76,7 @@ body {
.canvas-left-overlay {
position: absolute;
top: 30%;
top: 10%;
left: 0;
vertical-align: center;
z-index: 3;
......
This diff is collapsed.
......@@ -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;
......
......@@ -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);
......
......@@ -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.
drawOrientationForCurve : function(ctx, curve) {
for (var i = 0; i < curve.orientation.length; i++) {
var orientation = curve.getOrientationAtIndex(i);
Traj.View.drawOrientationForPoint(ctx,[curve.X[i], curve.Y[i]], orientation);
};
},
//the position needs to be in the space units, not the canvas.
//the position needs to be in the space units, not the canvas units.
drawOrientationForPoint : function(ctx, position, orientation){
console.log(ctx + " " + position + " " + orientation);
if(orientation[0]!= null){
var alpha = orientation[0] * Math.PI / 180,
......@@ -338,36 +337,18 @@ Traj.View = {
//////////////////////////////////
//////// Trajectories DRAWING///////
//////////////////////////////////
drawAllCurves : function(ctx) {
var alpha_stroke,
lwidth,
drawPoint,
currentCurveIndex = Traj.Manager.currentCurveIndex,
trajectories = Traj.Manager.trajectories;
for (var i = 0; i < trajectories.length; i++) {
alpha_stroke = (trajectories[i].multiPlay) ? this.CURVE_ACTIVE_ALPHA-0.1 : this.CURVE_ALPHA;
lwidth = (trajectories[i].multiPlay) ? this.CURVE_ACTIVE_STROKE_SIZE-1 : this.CURVE_STROKE_SIZE;
drawPoint = false ;
this.drawCurve(ctx, trajectories[i], i, lwidth, alpha_stroke, drawPoint);
}
},
drawAllBackgroundCurves : function(){
var ctx = this.traj_ctx,
alpha_stroke,
lwidth,
drawPoint,
lwidth = this.CURVE_STROKE_SIZE,
drawPoint = false,
currentCurveIndex = Traj.Manager.currentCurveIndex,
trajectories = Traj.Manager.trajectories,
multiplay_idx = Traj.Manager.getMultiPlayIndexes();
multi_indexes = Traj.Player.isMulti ? Traj.Manager.getMultiPlayIndexes() : [currentCurveIndex];
for (var i = 0; i < trajectories.length; i++) {
if(i!= Traj.Manager.currentCurveIndex){
alpha_stroke = (multiplay_idx.indexOf(i)!==-1) ? this.CURVE_ACTIVE_ALPHA : this.CURVE_ALPHA;
lwidth = this.CURVE_STROKE_SIZE;
drawPoint = false ;
alpha_stroke = (multi_indexes.indexOf(i)!==-1) ? this.CURVE_ACTIVE_ALPHA : this.CURVE_ALPHA;
this.drawCurve(ctx, trajectories[i], i, lwidth, alpha_stroke, drawPoint);
}
}
......@@ -391,32 +372,6 @@ Traj.View = {
this.drawCurveFirstPoint(this.dyn_ctx, pos, Traj.Manager.currentCurveIndex);
},
// Called when TimeSlider is moved
drawTimePoint : function(now) {
var dyn_ctx = Traj.View.dyn_ctx;
Traj.View.dyn_repaint();
var currentCurve = Traj.Manager.trajectories[Traj.Manager.currentCurveIndex];
var pointCoord = Traj.Utils.interpolate(now,currentCurve);
var x = pointCoord[0];
var y = pointCoord[1];
var z = pointCoord[2];
console.log(pointCoord);
if (!isNaN(x)&&!isNaN(y)) {
Traj.OSC.sendPosxyzMsg(pointCoord);
var pos = Traj.Utils.convertUnitsIntoCanvasPos([x,y]);
dyn_ctx.lineWidth = 5;
dyn_ctx.fillStyle = currentCurve.color;
dyn_ctx.strokeStyle = currentCurve.color;
dyn_ctx.globalAlpha = Traj.View.CURVE_ACTIVE_ALPHA;
Traj.View.drawPoint(dyn_ctx,pos , 8);
Traj.View.drawPoint(dyn_ctx,pos , 18);
Traj.Events.setZSliderValue(z);
}
},
dyn_repaint : function() {
this.clearContext(this.dyn_ctx);
},
......@@ -469,9 +424,7 @@ Traj.View = {
var curve = Traj.Manager.trajectories[currentCurveIndex];
if (typeof(curve) != 'undefined') {
this.drawCurve(this.current_ctx,curve,currentCurveIndex,this.CURVE_ACTIVE_STROKE_SIZE,this.CURVE_ACTIVE_ALPHA,true);
//if(curve.hasOrientation()){
this.drawOrientationForCurve(this.current_ctx,curve);
//}
this.drawOrientationForCurve(this.current_ctx,curve);
}
},
......
This diff is collapsed.
......@@ -97,6 +97,7 @@ Traj.Manager = {
processCreateNewCurve : function(x, y, z, t) {
Traj.Events.hideContextMenu();
Traj.View.dyn_repaint();
if(Traj.Manager.hasSelectedCurve()){
Traj.Manager.modifiedCurve = Traj.Manager.currentCurveIndex; // keep the curve to be modified
......@@ -525,9 +526,9 @@ Traj.Manager = {
longestCurveIdxOfPlayedCurve : function(indexes) {
var maxTime = 0,
idx;
idx = indexes[0];
for (var k=0;k<indexes.length;k++) {
var time = this.trajectories[indexes[k]].lengthTime();
var time = this.trajectories[indexes[k]].getDuration();
if (time>maxTime) {
maxTime = time;
idx = indexes[k];
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment