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
......@@ -791,7 +791,7 @@ masterSocketMsg : function( args ) {
}
}
},
connectMaster : function( master ) {
global.interface.livecodeServer.master = master
master.on( 'message', global.interface.masterSocketMsg )
......
......@@ -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>
......
......@@ -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) {
......
......@@ -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);
},
......
......@@ -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;
}
......@@ -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 = {};
......
......@@ -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);
}
},
......
......@@ -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';
}
}
......
......@@ -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