multiplay version 1

WOB/server/interfaces/js/Player.js

@@ -100,6 +100,133 @@ Traj.Player = {
         for (var i = 0; i < indexes.length; i++) {
             Traj.Player.playCurve(indexes[i]);
         }
+
+        this.stopCurrentCurve();
+
+        Traj.Player.isPlaying = true;
+        var playButton = document.getElementById('playButton');
+        playButton.innerHTML = 'Pause';
+
+        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]],
+                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;
+        }
+
+        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];
+        }
+
+        (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
+            Traj.Events.setSliderValue(now);
+
+            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][1];
+                    yArray[k] = pointCoordArray[k][2];
+
+                    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;  
+                    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);
+        }())
+
+
+
     },
 
     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())
@@ -107,6 +234,9 @@ Traj.Player = {
 
         Traj.Player.isPlaying = true;
 
+         var multiplayButton = document.getElementById('multiplayButton');
+         multiplayButton.innerHTML = 'Pause';
+
         var curvesIdx = Traj.Manager.playedCurves; // A definir dans Manager
 
         var curveArray = [], 

WOB/server/interfaces/js/events.js

@@ -762,13 +762,13 @@ Traj.Events = {
             }
         };
         var multiplay = function() {
-            if (playButton.innerHTML == 'Play') {
+            if (multiplayButton.innerHTML == 'Multi') {
                 var indexes = Traj.Manager.getMultiPlayIndexes();
                 Traj.Player.playCurves(indexes);
                 multiplayButton.innerHTML = 'Pause';
             } else {
                 Traj.Player.stopCurrentCurve();
-                multiplayButton.innerHTML = 'Play';
+                multiplayButton.innerHTML = 'Multi';
             }
         }
 

WOB/server/interfaces/js/manager.js

@@ -16,29 +16,36 @@ Traj.Manager = {
         Traj.View.repaintAll();
     },
 
+    longestCurveIdxOfPlayedCurve : function(indexes) {
+        var maxTime = 0,
+            idx;
+        for (var k=0;k<indexes.length;k++) {
+            var time = this.trajectories[indexes[k]].lengthTime();
+            if (time>maxTime) {
+                maxTime = time;
+                idx = indexes[k];
+            }
+        }
+        return idx;
+    },
+
     getMultiPlayIndexes : function(){
         var indexes = [],
             source_pos = [],
-            pos = 0;
-
-        for (var i = 0; i < Traj.Manager.trajectories.length; i++) {
-            var src_nb = Traj.Manager.trajectories[i].sourceNumber;
+            pos = 0,
+            root = (Traj.Manager.hasSelectedCurve()) ? Traj.Manager.currentCurveIndex : 0;
 
-            console.log(source_pos[src_nb]);
+        for (var i = root; i < (Traj.Manager.trajectories.length + root); i++) {
+            var cpt = i % Traj.Manager.trajectories.length;
+            var src_nb = Traj.Manager.trajectories[cpt].sourceNumber;
 
             if(typeof source_pos[src_nb]!=='undefined'){
-                console.log("exist");
-                indexes[source_pos[src_nb]] = i;
+                indexes[source_pos[src_nb]] = cpt;
             }else{
-                console.log("does not exists");
-                indexes[pos] = i;
+                indexes[pos] = cpt;
                 source_pos[src_nb] = pos;
                 pos++;
             }
-            console.log("indexes");
-            console.log(indexes);
-            console.log("source_pos");
-            console.log(source_pos);
         }
         return indexes;