Skip to content

GitLab

Commit 9511f54b authored by Jérémie Garcia's avatar Jérémie Garcia
Browse files

SImplification in interface OK 

Todo multi debug player
Lord touch menu
parent 11c2f893
Hide whitespace changes
Inline Side-by-side
WOB/server.js
View file @ 9511f54b
......@@ -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
View file @ 9511f54b
......@@ -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
View file @ 9511f54b
......@@ -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
View file @ 9511f54b
......@@ -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
View file @ 9511f54b
......@@ -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
View file @ 9511f54b
......@@ -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
View file @ 9511f54b
......@@ -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
View file @ 9511f54b
......@@ -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';
}
}
......
WOB/server/interfaces/js/manager.js
View file @ 9511f54b
......@@ -2,7 +2,7 @@
Traj.Manager = {
//Curves
trajectories : [], //Array of TimedCurves
currentCurveIndex : 0, //Index Of the sekected curve
currentCurveIndex : -1, //Index Of the sekected curve
currentCurve : null,
currentCurveLbl : "", //label for html display
clipboardCurve : null, //temporary curve to paste
......@@ -16,19 +16,47 @@ Traj.Manager = {
Traj.View.repaintAll();
},
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;
console.log(source_pos[src_nb]);
if(typeof source_pos[src_nb]!=='undefined'){
console.log("exist");
indexes[source_pos[src_nb]] = i;
}else{
console.log("does not exists");
indexes[pos] = i;
source_pos[src_nb] = pos;
pos++;
}
console.log("indexes");
console.log(indexes);
console.log("source_pos");
console.log(source_pos);
}
return indexes;
},
processCreateNewCurve : function(x, y, z, t) {
Traj.OSC.sendDraw('start');
Traj.Events.hideContextMenu();
//if (Traj.Events.rangeSlider) { // case "Select and Redraw"
if(Traj.Manager.hasSelectedCurve()){
Traj.Manager.modifiedCurve = Traj.Manager.currentCurveIndex; // keep the curve to be modified
//}
Traj.Manager.currentCurveIndex = Traj.Manager.currentCurveIndex + 1;
}else{
Traj.Manager.currentCurveIndex = Traj.Manager.trajectories.length;
}
timeStart = t;
Traj.Manager.currentCurve = new TimedCurve(Traj.Manager.currentSource);
//Traj.Manager.selectCurve(Traj.Manager.trajectories.length);
//Traj.Manager.selectCurveLight(Traj.Manager.trajectories.length);
Traj.Manager.currentCurve.addTimedPoint(x, y, z, 0);
Traj.OSC.streamNewCurve(Traj.Manager.currentCurveIndex);
Traj.OSC.streamCurveLastPoint(Traj.Manager.currentCurve);
if (Traj.Events.rangeSlider) { // case "Select and Redraw" : draw the curve being modified and the range slider points
var val = Traj.Events.getSliderValue();
......@@ -37,8 +65,10 @@ Traj.Manager = {
Traj.View.drawCurve(Traj.View.traj_ctx,curve,Traj.Manager.modifiedCurve,Traj.View.CURVE_ACTIVE_STROKE_SIZE,curve.color);
} else {
Traj.View.clearContext(Traj.View.current_ctx);
}
Traj.OSC.streamNewCurve(Traj.Manager.currentCurveIndex);
Traj.OSC.streamCurveLastPoint(Traj.Manager.currentCurve);
},
......@@ -52,35 +82,19 @@ Traj.Manager = {
processEndCurve : function(x, y, z, t) {
Traj.State.newAction();
//TODO use actual length instead of number of points...
if (Traj.Manager.currentCurve !== null && Traj.Manager.currentCurve.X.length > 4) {
if (Traj.Manager.currentCurve !== null && Traj.Manager.currentCurve.X.length > 6) {
var curveIndex = Traj.Manager.currentCurveIndex;
var currentCurve = Traj.Manager.currentCurve;
Traj.Manager.trajectories.push(currentCurve.clone());
Traj.Manager.trajectories.push(Traj.Manager.currentCurve.clone());
Traj.Manager.currentCurve = null;
Traj.Events.initSlider(false); // update TimeSlider
var curveIndex = Traj.Manager.trajectories.length-1;
Traj.Manager.currentCurve = null;
Traj.View.dyn_repaint();
Traj.View.traj_repaint();
Traj.Session.saveTrajSession(); // save session
var curveSendIdx = Traj.Manager.trajectories.length-1;
if(Traj.Manager.trajectories[curveIndex].X.length <1000){
Traj.OSC.sendCurveSingleMessageOSC(Traj.Manager.trajectories[curveSendIdx], curveSendIdx);
}else{
Traj.OSC.sendCurveOSC(Traj.Manager.trajectories[curveSendIdx], curveSendIdx);
}
Traj.OSC.sendDraw('end');
Traj.Manager.selectCurve(Traj.Manager.trajectories.length-1); // avant ou après
Traj.Manager.selectCurve(curveIndex); // avant ou après
Traj.Events.initSlider(false); // update TimeSlider
Traj.Events.drawing = false;
// Variables for circular or concat
var currentCurve = Traj.Manager.trajectories[Traj.Manager.currentCurveIndex],
var currentCurve = Traj.Manager.trajectories[curveIndex],
lastCurve = Traj.Manager.trajectories[Traj.Manager.modifiedCurve],
curveLength = currentCurve.X.length-1,
firstPoint = [currentCurve.X[0],currentCurve.Y[0]],
......@@ -88,18 +102,26 @@ Traj.Manager = {
distance = Traj.Utils.distanceBtwPoints(firstPoint,lastPoint);
if (typeof(lastCurve)!=='undefined') {
var lastPointLastCurve = [lastCurve.X[lastCurve.X.length-1],lastCurve.Y[lastCurve.X.length-1]]; // TODO : use pixel distance
var distance2 = Traj.Utils.distanceBtwPoints(firstPoint,lastPointLastCurve);
var lastPointLastCurve = [lastCurve.X[lastCurve.X.length-1],lastCurve.Y[lastCurve.X.length-1]];
var distance2 = Traj.Utils.distanceBtwPoints(firstPoint,lastPointLastCurve);
} else {
var distance2 = Infinity;
}
Traj.Events.showContextMenu(distance < 0.4, distance2 < 0.5);
Traj.Session.saveTrajSession(); // save session
if(currentCurve.X.length <1000){
Traj.OSC.sendCurveSingleMessageOSC(currentCurve, curveIndex);
}else{
Traj.OSC.sendCurveOSC(currentCurve, curveIndex);
}
}else{
Traj.Manager.currentCurve = null;
Traj.Manager.selectPreviousCurve();
Traj.View.dyn_repaint();
Traj.OSC.sendDraw('end');
Traj.Manager.selectCurve(Traj.Manager.trajectories.length-1); // avant ou après
}
},
......@@ -137,13 +159,17 @@ Traj.Manager = {
copyCurrentCurve : function(beginIdx,endIdx) {
var curve = Traj.Manager.trajectories[Traj.Manager.currentCurveIndex];
newCurve = curve.clone();
for (var k=0;k<curve.X.length;k++) {
newCurve.t[k] = newCurve.t[k] - newCurve.t[0];
if(Traj.Manager.hasCurveSelected())
{
var curve = Traj.Manager.trajectories[Traj.Manager.currentCurveIndex];
newCurve = curve.clone();
for (var k=0;k<curve.X.length;k++) {
newCurve.t[k] = newCurve.t[k] - newCurve.t[0];
}
this.clipboardCurve = newCurve;
}
this.clipboardCurve = newCurve;
},
// paste dans une courbe la clipboardCurve en translatant le reste de la courbe.
......@@ -251,6 +277,7 @@ Traj.Manager = {
Traj.Manager.selectCurve((Traj.Manager.currentCurveIndex - 1 + Traj.Manager.trajectories.length) % Traj.Manager.trajectories.length);
Traj.View.traj_repaint();
Traj.View.dyn_repaint();
Traj.Session.saveTrajSession();
},
selectCurveLight : function(index) {
......@@ -260,34 +287,52 @@ Traj.Manager = {
},
selectCurve : function(index) {
if (isNaN(index) || index <0){
index = 0;
if (isNaN(index) || index <0 || index === null){
index = -1;
}
var lastCurveIdx = Traj.Manager.currentCurveIndex;
Traj.Manager.currentCurveIndex = index;
Traj.Manager.currentCurveLbl.innerHTML = "" + Traj.Manager.currentCurveIndex;
Traj.Manager.currentCurveLbl.innerHTML = (index===-1) ? " " : ( "" + Traj.Manager.currentCurveIndex);
Traj.View.traj_repaint();
Traj.View.dyn_repaint();
Traj.View.current_repaint();
//update the source color button
if(Traj.Manager.getCurrentCurve()){
var nb = Traj.Manager.getCurrentCurve().sourceNumber;
Traj.Events.selectSourceButton(nb);
Traj.Manager.currentSource = nb;
}
// change slider max value to curve max time, and time length, but not during drawing a new one (after)
if (Traj.Manager.trajectories[index] && index!=lastCurveIdx) {
Traj.Events.initSlider(false);
}
Traj.Session.saveTrajSession();
},
hasSelectedCurve : function (){
return this.currentCurveIndex != -1;
},
getCurrentCurve : function () {
if (this.hasSelectedCurve()){
return this.trajectories[Traj.Manager.currentCurveIndex];
}
return Traj.Manager.currentCurve;
},
getClosestCurveFromTouch : function(pos) {
var trajectories = Traj.Manager.trajectories;
var curve = {};
var minDistance = Infinity;
var minDistance = 0.1; //0.05 very close
var distance = 0;
var index = null;
for (var k = 0 ; k<trajectories.length;k++) {
curve = trajectories[k];
distance = curve.getDistanceToPoint(curve,pos);
distance = curve.getDistanceToPoint(pos);
if (distance < minDistance){
minDistance = distance;
index = k;
......@@ -301,14 +346,15 @@ Traj.Manager = {
////////////////////////////////////
selectNextCurve :function(){
Traj.Manager.selectCurve((Traj.Manager.currentCurveIndex + 1) % Traj.Manager.trajectories.length);
var idx = (Traj.Manager.currentCurveIndex != -1) ? (Traj.Manager.currentCurveIndex + 1) : 0;
Traj.Manager.selectCurve(idx % Traj.Manager.trajectories.length);
},
selectPreviousCurve : function (){
Traj.Manager.selectCurve((Traj.Manager.currentCurveIndex - 1 + Traj.Manager.trajectories.length) % Traj.Manager.trajectories.length);
var idx = (Traj.Manager.currentCurveIndex != -1) ? (Traj.Manager.currentCurveIndex - 1 + Traj.Manager.trajectories.length) : Traj.Manager.trajectories.length -1;
Traj.Manager.selectCurve(idx % Traj.Manager.trajectories.length);
},
translateCurve : function (){
var curve = Traj.Manager.trajectories[Traj.Manager.currentCurveIndex];
if (curve != undefined) {
......
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