SImplification in interface OK

Todo multi debug player
Lord touch menu

WOB/server.js

@@ -791,7 +791,7 @@ masterSocketMsg : function( args ) {
         }
       }
     },
-    
+     
     connectMaster : function( master ) {
       global.interface.livecodeServer.master = master
       master.on( 'message', global.interface.masterSocketMsg )

WOB/server/interfaces/Trajectoires.html

@@ -20,7 +20,7 @@
     <script type="text/javascript" src="libs/jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.js"></script>
     <script type="text/javascript" src='libs/jquery.range.js'></script>
     <script type="text/javascript" src='libs/simplify.js'></script>
-    <script type="text/javascript" src="libs/hammer.js"></script>
+    <script type="text/javascript" src="libs/hammer.min.js"></script>
 
     <!-- Internal Scripts -->
     <script type="text/javascript" src="js/index.js"></script>

WOB/server/interfaces/js/OSC.js

@@ -135,7 +135,6 @@ Traj.OSC = {
     streamCurvePoint : function(curve, index) {
         //ussing Spat formatting source ID xyz x y z
         Traj.OSC.sendSpatMessage( ['source', curve.sourceNumber, 'xyz',curve.X[index], curve.Y[index], curve.Z[index]]);
-        //Traj.OSC.sendPosxyzMsg([curve.sourceNumber, curve.X[index], curve.Y[index], curve.Z[index], curve.t[index]]);
     },
 
     sendCurveOSC : function(curve, id) {

WOB/server/interfaces/js/Player.js

@@ -94,7 +94,12 @@ Traj.Player = {
             
             Traj.Player.requestId = requestAnimationFrame(loop);
         }())
+    },
 
+    playCurves : function (indexes){
+        for (var i = 0; i < indexes.length; i++) {
+            Traj.Player.playCurve(indexes[i]);
+        }
     },
 
     playAllCurve : function() {        // LAG WHEN LOOP MODE. TODO : SAVE ALL THE LOADED DATA AND KEEP IT FOR THE NEXT CALL OF playAllCurve() (add a function that calls playAllCurve())
@@ -234,7 +239,6 @@ Traj.Player = {
         Traj.View.traj_ctx.lineWidth = Traj.View.CURVE_ACTIVE_STROKE_SIZE *2.5;
         Traj.View.traj_ctx.strokeStyle = curve.color;
 
-
         this.playCurve(curveIdx);
 
 	},

WOB/server/interfaces/js/TimedCurve.js

@@ -15,7 +15,6 @@ function TimedCurve(source) {
 TimedCurve.prototype.changeSource = function(source) {
     this.sourceNumber = Number(source);
     this.color = Traj.Utils.getColorSource(source);
-    var index = Traj.Manager.trajectories.indexOf(this);
 }
 
 // write points into currentCurve object
@@ -180,13 +179,14 @@ TimedCurve.prototype.lengthTime = function() {
 }
 
 TimedCurve.prototype.getDistanceToPoint = function(pos) {
-        var distance = Infinity;
-        var minDistance = Infinity;
+        var distance = Infinity,
+            tmp;
+
         for (var k=0;k<this.X.length;k++) {
-            distance = Traj.Utils.distanceBtwPoints([this.X[k],this.Y[k]],pos)
-            if (distance<minDistance) {
-                minDistance = distance;
+            tmp = Traj.Utils.distanceBtwPoints([this.X[k],this.Y[k]],pos);
+            if (tmp<distance) {
+                distance = tmp;
             }
         }
-        return minDistance;
+        return distance;
 }

WOB/server/interfaces/js/Utils.js

@@ -88,7 +88,6 @@ Traj.Utils = {
         var distanceToPoint0 = this.distanceBtwPoints(projectedPoint,pointsLine[0]);
         var distanceToPoint1 = this.distanceBtwPoints(projectedPoint,pointsLine[1]);
         var lengthLine = this.distanceBtwPoints(pointsLine[0],pointsLine[1]);
-        console.log(distance)
         if (distance < 1 ) {//seuil
             if (lengthLine < distanceToPoint0 || lengthLine < distanceToPoint1) {
                 console.log('false')
@@ -108,17 +107,12 @@ Traj.Utils = {
     },
 
     distanceBtwPoints : function(p1, p2) {
+        console.log()
         var dx = p1[0] - p2[0];
         var dy = p1[1] - p2[1];
         return Math.sqrt(dx * dx + dy * dy);
     },
 
-    // weirdDistanceBtwPoints : function(p1,p2) {
-    //     var dx = p1[0] - p2[0];
-    //     var dy = p1[1] - p2[1];
-    //     return (dx + dy)/4;
-    // },
-
     simplifyCurve : function(curve,tolerance) {
         var points = [],
             pt = {};

WOB/server/interfaces/js/View.js

@@ -34,7 +34,7 @@ Traj.View = {
     //and dynamic affectation depending on the number of sources
     default_colors : ['#373737', '#e69a00', '#5a9f29', '#e63d00', '#005788', '#810A69', '#2C827B', '#C6C027'], 
     FIRST_POINT_SIZE : 5, //pix
-    CURVE_STROKE_SIZE : 1,
+    CURVE_STROKE_SIZE : 2,
     CURVE_ACTIVE_STROKE_SIZE : 3,
     CURVE_ALPHA : 0.4,
     CURVE_ACTIVE_ALPHA : 0.9,
@@ -49,8 +49,6 @@ Traj.View = {
     timeStart : {}, // for Time curve information
     touchState : 'wait',
 
-
-
     //initializing the canvas and their contexts
     initCanvas : function() {
         //retrieving the canvas from the html code 
@@ -95,7 +93,7 @@ Traj.View = {
     drawCurveFirstPoint : function(ctx, pos, index) {
         this.drawPoint(ctx, pos, this.FIRST_POINT_SIZE);
         ctx.fillStyle = 'black';
-        ctx.font = '10px Georgia';
+        ctx.font = '12px Georgia';
         ctx.fillText(index, pos[0] - this.FIRST_POINT_SIZE - 2, pos[1] - this.FIRST_POINT_SIZE - 2);
     },
 
@@ -143,13 +141,11 @@ Traj.View = {
             currentCurveIndex = Traj.Manager.currentCurveIndex,
             trajectories = Traj.Manager.trajectories;
  
-        for (var i = 0; i < trajectories.length; i++) { // TODO : DO NOT DRAW CURRENT CURVE IN TRAJ_CANVAS. USE CURRENT_CANVAS
-            if (i!=currentCurveIndex) {
-                alpha_stroke = (trajectories[i].multiPlay) ? this.CURVE_ACTIVE_ALPHA-0.1 : this.CURVE_ALPHA;//(i === currentCurveIndex) ? this.CURVE_ACTIVE_ALPHA : this.CURVE_ALPHA;
-                lwidth = (trajectories[i].multiPlay) ? this.CURVE_ACTIVE_STROKE_SIZE-1 : this.CURVE_STROKE_SIZE;//(i === currentCurveIndex) ? this.CURVE_ACTIVE_STROKE_SIZE : this.CURVE_STROKE_SIZE;
-                drawPoint = false ;//(i === currentCurveIndex) ? true : false;
-                this.drawCurve(ctx, trajectories[i], i, lwidth, alpha_stroke,drawPoint);
-            }
+        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);
         }
     },
 

WOB/server/interfaces/js/events.js

@@ -65,7 +65,6 @@ Traj.Events = {
                 Traj.Events.touches.push([evt.changedTouches[0].clientX,evt.changedTouches[0].clientY]);
                 Traj.Events.touches.push([evt.changedTouches[1].clientX,evt.changedTouches[1].clientY]);
             }
-            //console.log(Traj.Events.touches)
             // case for rotate from hammer.js
             var center = [(evt.touches[0].clientX + evt.touches[1].clientX)/2 , (evt.touches[0].clientY + evt.touches[1].clientY)/2];
             Traj.Events.center2Touch = Traj.Utils.convertCanvasPosIntoUnits(center);
@@ -472,11 +471,6 @@ Traj.Events = {
         }
     },
 
-
-
-
-
-
     ///////////////////////////////////////////////////////////////////
     ////////////////// SEVERAL (menu, transformation) /////////////////
     ///////////////////////////////////////////////////////////////////
@@ -512,13 +506,17 @@ Traj.Events = {
                 dyn_ctx.lineTo(point2[0],point2[1]);
                 dyn_ctx.stroke();
 
-                var curve = Traj.Manager.trajectories[Traj.Manager.currentCurveIndex];
+                if(Traj.Manager.hasSelectedCurve()){
+
+                    var curve = Traj.Manager.getCurrentCurve();
+
+                    curve.spaceScale(evt.scale / scale);
+                    curve.rotate(center,-evt.rotation - angle)
+                    Traj.View.current_repaint();
+                    scale = evt.scale;
+                    angle = -evt.rotation;
+                }
 
-                curve.spaceScale(evt.scale / scale);
-                curve.rotate(center,-evt.rotation - angle)
-                Traj.View.current_repaint();
-                scale = evt.scale;
-                angle = -evt.rotation;
             } else { 
                 scale = 1;
                 angle = 0;
@@ -579,6 +577,31 @@ Traj.Events = {
         }
     },
 
+    updateSourceButton : function(nb) { 
+        var buttons = document.getElementsByClassName('sourceButton');
+
+        var selectSource = function(source) {
+            Traj.Events.selectSourceButton(source);
+            if (Traj.Events.drawing) {
+                Traj.Manager.currentSource = source;
+            } else {
+                Traj.Manager.currentSource = source;
+                var curve = Traj.Manager.trajectories[Traj.Manager.currentCurveIndex];
+                if (curve != undefined) {
+                    curve.changeSource(source);
+                }
+                Traj.View.current_repaint();
+                Traj.View.traj_repaint();
+            }
+        };
+
+        //Need to use the touchstart in plain text (not in a variable)
+        //I don't no why and this is annoying!!!
+        for (var k=0;k<buttons.length;k++) {
+            buttons[k].style.background=Traj.View.default_colors[k];
+            buttons[k].addEventListener(Traj.Utils.getStartEventName(), selectSource.bind(null,k+1));
+        }
+    },
 
     addDrawZoneEvent : function() { // evt for bi-manual use for drawing
         var drawZone = document.getElementById('drawZone');
@@ -664,9 +687,10 @@ Traj.Events = {
     //two boolean to show or not the contextual menu
     showContextMenu : function(circular, concat) {
         if(circular||concat){
-            var curve = Traj.Manager.trajectories[Traj.Manager.currentCurveIndex];
-            var pos = Traj.Utils.convertUnitsIntoCanvasPos([curve.X[curve.X.length-1],curve.Y[curve.X.length-1]]);
-            var divMenu = document.getElementById("contextMenu");
+            var divMenu = document.getElementById("contextMenu"),
+                curve = Traj.Manager.trajectories[Traj.Manager.currentCurveIndex],
+                pos = Traj.Utils.convertUnitsIntoCanvasPos([curve.X[curve.X.length-1],curve.Y[curve.X.length-1]]);
+            
 
             if(circular&&concat){
                 document.getElementById("circularButton").style.display = "block";
@@ -675,6 +699,7 @@ Traj.Events = {
                 document.getElementById("circularButton").style.display = "block";
                 document.getElementById("concatButton").style.display = "none";
             }else{
+                pos = Traj.Utils.convertUnitsIntoCanvasPos([curve.X[0],curve.Y[0]]);
                 document.getElementById("circularButton").style.display = "none";
                 document.getElementById("concatButton").style.display = "block";
             }
@@ -738,10 +763,11 @@ Traj.Events = {
         };
         var multiplay = function() {
             if (playButton.innerHTML == 'Play') {
-               // Traj.Player.play();
+                var indexes = Traj.Manager.getMultiPlayIndexes();
+                Traj.Player.playCurves(indexes);
                 multiplayButton.innerHTML = 'Pause';
             } else {
-                //Traj.Player.stopCurrentCurve();
+                Traj.Player.stopCurrentCurve();
                 multiplayButton.innerHTML = 'Play';
             }
         }