Commit 9771c959 authored by Jérémie Garcia's avatar Jérémie Garcia

multi-user version 1

todo, bugs for send user display…
parent b2824f4a
Traj/qr_code.png

618 Bytes | W: | H:

Traj/qr_code.png

519 Bytes | W: | H:

Traj/qr_code.png
Traj/qr_code.png
Traj/qr_code.png
Traj/qr_code.png
  • 2-up
  • Swipe
  • Onion skin
......@@ -507,27 +507,6 @@ assignSocketID : function( server, socket ) {
server.clients[ socket.ip ] = socket
socket.id = server.clientCount++
}
// for(var i = 0; i < server.clients.length; i++) {
// if(typeof server.clients[i] !== 'undefined') {
// if(server.clients[i].ip === socket.ip) {
// found = true;
// socket.id = server.clients[i].id;
// break;
// }
// }
// }
// if(!found) {
// var id;
// for(var i = 0; i <= server.clients.length; i++) {
// if(typeof server.clients[i] === 'undefined') {
// id = i;
// break;
// }
// }
// socket.id = id;
// server.clients.push( socket );
// }
},
clientClose : function( server, socket ) {
if(server.outputType === 'OSC') {
......@@ -539,26 +518,40 @@ assignSocketID : function( server, socket ) {
}
}
// for( var i = server.clients.length - 1; i >= 0; i++) {
// if( server.clients[ i ].id === socket.id ) {
// server.clients.splice( i, 1 )
// break;
// }
// }
// elete server.clients[ socket.id ];
if( typeof server.clients[ socket.ip ] !== 'undefined' ) {
delete server.clients[socket.ip];
server.clientCount--;
}
$(socket.row).remove();
global.interface.notifyClientsInIdUpdates(server,socket.id);
},
sendClientConnectionNotification : function( server, id ) {
if(server.outputType === 'OSC') {
if(server.outputType === 'OSC') {
//send a message to the clients so that they know their ID as well (for collaborative cases)
global.interface.notifyClientsInIdUpdates(server,id);
server.oscOutput.send( '/deviceConnected', 'i', [ id ] );
}else if( server.outputType === 'WebSocket' ) {
if( server.master !== null ) {
var msg = JSON.stringify({ type:'osc', address:'/deviceConnected', typetags:'i', parameters:[ id ] })
server.master.send( msg )
}
}
},
notifyClientsInIdUpdates : function(server,id){
var client, counter = 0, length = server.clientCount;
for(var key in server.clients) {
client = server.clients[key];
if(client !== null){
var msg = { type:'osc', address:'/id', typetags:'ii', parameters:[ counter, length ]};
client.send( JSON.stringify(msg));
counter++;
}
}
},
createWebSocketListener : function( server ) {
server.webSocket.on( 'connection', function (socket) {
var found = false;
......
......@@ -31,6 +31,9 @@
<script type="text/javascript" src="js/manager.js"></script>
<script type="text/javascript" src="js/events.js"></script>
<!-- Internal Scripts that redefine some methods -->
<script type="text/javascript" src="js/multi.js"></script>
<title>Trajectoires</title>
</head>
......@@ -83,8 +86,10 @@
<a href="#" onClick="javascript:Traj.Manager.deleteAllCurves();" data-role="button" data-iconpos="notext" data-icon="refresh" data-inline="true">Refresh</a>
</div>
<div class="top-right">
<a href="#settings-panel" data-icon="gear" data-role="button" data-iconpos="right" data-inline="true">Settings</a>
<div data-role = "controlgroup" class="top-right" data-mini="true" data-type="horizontal">
<a id="lbl_current_id" data-mini="true" style="background: rgba(255, 255, 255, 0.0); color: darkred;" data-role="button" href="#" data-inline="true">0</a>
<a href="#settings-panel" data-icon="gear" data-role="button" data-iconpos="right" data-inline="true">Settings</a>
</div>
</div>
......
This diff is collapsed.
......@@ -103,7 +103,6 @@ Traj.View = {
this.repaintAll();
},
//used to clear any of the graphics contexts
clearContext : function(ctx) {
ctx.clearRect(0, 0, this.dyn_canvas.width, this.dyn_canvas.height);
......@@ -124,32 +123,36 @@ Traj.View = {
},
drawCurve : function(ctx, curve, index, linewidth, alpha, withPoint) {
ctx.lineWidth = linewidth;
ctx.fillStyle = curve.color;
ctx.strokeStyle = curve.color;
ctx.globalAlpha = alpha;
var i = 0;
var pos = Traj.Utils.convertUnitsIntoCanvasPos([curve.X[i], curve.Y[i]]);
this.drawCurveFirstPoint(ctx, pos, index);
if(Traj.Manager.allowed_indexes === null || Traj.Manager.allowed_indexes.indexOf(curve.sourceNumber)!==-1){
// ctx.beginPath();
ctx.moveTo(pos[0], pos[1]);
ctx.lineWidth = linewidth;
ctx.fillStyle = curve.color;
ctx.strokeStyle = curve.color;
ctx.globalAlpha = alpha;
for (i = 1; i < curve.X.length; i++) {
pos = Traj.Utils.convertUnitsIntoCanvasPos([curve.X[i], curve.Y[i]]);
ctx.lineTo(pos[0], pos[1]);
}
ctx.stroke();
var i = 0;
var pos = Traj.Utils.convertUnitsIntoCanvasPos([curve.X[i], curve.Y[i]]);
this.drawCurveFirstPoint(ctx, pos, index);
// ctx.beginPath();
ctx.moveTo(pos[0], pos[1]);
//draw the points
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.5));
ctx.lineTo(pos[0], pos[1]);
}
ctx.stroke();
//draw the points
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.5));
}
}
ctx.globalAlpha = 1;
}
ctx.globalAlpha = 1;
},
speaker_image : new Image(),
......
......@@ -886,8 +886,24 @@ OrientationRecording : function(){
if (playButton.innerHTML == 'Play') {
//if multi mode, then gets the list of indexes otherwise use the current index
var indexes = Traj.Player.isMulti ? Traj.Manager.getMultiPlayIndexes() : [Traj.Manager.currentCurveIndex];
Traj.Player.playCurves(indexes);
playButton.innerHTML = 'Pause';
//filter the indexes for multiuser behaviors
if(Traj.Manager.allowed_indexes != null){
var updated_indexes = [];
var cnt = 0;
for(var i = 0; i< indexes.length; i++){
if(Traj.Manager.allowed_indexes.indexOf(Traj.Manager.trajectories[indexes[i]].sourceNumber) !=-1){
updated_indexes[cnt] = indexes[i];
cnt ++;
}
}
indexes = updated_indexes;
}
if(indexes.length >0 ){
Traj.Player.playCurves(indexes);
playButton.innerHTML = 'Pause';
}
} else {
Traj.Player.stopPlayActions();
playButton.innerHTML = 'Play';
......
......@@ -10,18 +10,19 @@ Traj.Manager = {
modifiedCurve : null,
NB_SOURCES : 8,
multiplay_indexes : [], //list of curve index to play for each source indexes i.e. if 4 sources = [0, 'undefined', 23, 'undeifned']
allowed_indexes : null, //list of index that are allowed for playing (multiuser value effect only)
//MULTIPLAY//
//find all possible curves indexes matching the source nb
getPossibleTrajIndexesForSource : function (source_idx){
var traj_indexes = [];
var cpt = 0;
for (var i = 0; i < this.trajectories.length; i++) {
if(this.trajectories[i].sourceNumber === source_idx){
traj_indexes[cpt] = i;
cpt++;
var cpt = 0;
for (var i = 0; i < this.trajectories.length; i++) {
if(this.trajectories[i].sourceNumber === source_idx){
traj_indexes[cpt] = i;
cpt++;
}
}
}
return traj_indexes;
},
......@@ -535,6 +536,11 @@ Traj.Manager = {
}
}
return idx;
},
//for multi-user version, to be overridden in another js file
processClientId : function(id){
// do something only if multiuser version
}
};
///////////////////////// TRAJ MANAGER ///////////////////////////
Traj.Manager.processClientId = function(args){
// do something only if multiuser version
var id = args[0];
var total = args[1];
Traj.View.updateClientIdView(id,total);
Traj.View.updateSourceButtons(id,total);
};
Traj.View.updateClientIdView = function (id,total){
var currentCurveLID = document.getElementById('lbl_current_id');
currentCurveLID.innerHTML = "" + (id+1) + "/" + total;
};
Traj.View.updateSourceButtons = function (id,total){
var buttons = document.getElementsByClassName('sourceButton');
if(total ===1){
Traj.Manager.allowed_indexes = null;
}else if(total==2){
if(id===0){
Traj.Manager.allowed_indexes = [1,3];
}else if(id ===1){ //the second has 2 and 4
Traj.Manager.allowed_indexes = [2,4];
}
}else if(total>2){
Traj.Manager.allowed_indexes = [id+1];
}
//updateSourceButtonste the buttons accordingly
for (var k=0;k<buttons.length;k++) {
//show the ones that may have been swithed of
buttons[k].style.display = "block";
if(total==2){
//the first has 1 and 3
if(id===0){
if(k!=0 && k!=2){
buttons[k].style.display = "none";
}
}
if(id ===1){ //the second has 2 and 4
if(k=!1 && k!=3){
buttons[k].style.display = "none";
}
}
}else if(total>2){
//get your own id (max 4) only
if(k!=id){
buttons[k].style.display = "none";
}
}
}
Traj.View.repaintAll();
};
......@@ -61,9 +61,14 @@ Traj.OSC = {
var split = address.split('/');
//test for the correct namespace
console.log(split[1]);
// console.log(split[1]);
//receiving the client ID (used for choosing curves)
if(split[1].indexOf("id") != -1 ){
Traj.Manager.processClientId([msg.parameters[0],msg.parameters[1]]);
}
if(split[1].indexOf("spat") != -1 ){
console.log(split[2]);
//console.log(split[2]);
if(split[2].indexOf("source") != -1){
var nb = (split[2].replace("source",""));
var sourcenb = Number(nb);
......
......@@ -10,6 +10,9 @@ Traj.Player = {
//This methods plays the curves from their indexes
playCurves : function (indexes){
Traj.Player.isPlaying = true;
//Find longest curves for the time slider range
......@@ -37,7 +40,6 @@ Traj.Player = {
Traj.Events.setSliderValue(now);
// clear dyn canvas
Traj.View.dyn_repaint();
//stop if the current time is less than the whole duration
if(now > maxDuration){
//if loop mode then relaucnh the palying
......
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