update multiplay and interface

WOB/server/interfaces/Trajectoires.html

@@ -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

@@ -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/TimedCurve.js

@@ -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

@@ -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

@@ -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);
         }
     },
 

WOB/server/interfaces/js/manager.js

@@ -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];