Commit 84e57a01 authored by Jérémie Garcia's avatar Jérémie Garcia

lof of debugging

More generic events
TODO : Multi Play, OSC Messages tests, Contextual Menu, Events Cleanup,
Nil Selection on Desktop, Dynamic Curve not very good…
parent 784c37b5
WOB/qr_code.png

624 Bytes | W: | H:

WOB/qr_code.png

627 Bytes | W: | H:

WOB/qr_code.png
WOB/qr_code.png
WOB/qr_code.png
WOB/qr_code.png
  • 2-up
  • Swipe
  • Onion skin
......@@ -107,38 +107,22 @@
</div>
<!-- /header -->
<div id="sourceSlectDiv">
<button class='sourceButton' id='s1' data-role="none">
<div>1</div>
</button>
<div id="sourceSelectDiv">
<button class='sourceButton' id='s1' data-role="none">1</button>
<br/>
<button class='sourceButton' id='s2' data-role="none">
<div>2</div>
</button>
<button class='sourceButton' id='s2' data-role="none">2</button>
<br/>
<button class='sourceButton' id='s3' data-role="none">
<div>3</div>
</button>
<button class='sourceButton' id='s3' data-role="none">3</button>
<br/>
<button class='sourceButton' id='s4' data-role="none">
<div>4</div>
</button>
<button class='sourceButton' id='s4' data-role="none">4</button>
<br/>
<button class='sourceButton' id='s5' data-role="none">
<div>5</div>
</button>
<button class='sourceButton' id='s5' data-role="none">5</button>
<br/>
<button class='sourceButton' id='s6' data-role="none">
<div>6</div>
</button>
<button class='sourceButton' id='s6' data-role="none">6</button>
<br/>
<button class='sourceButton' id='s7' data-role="none">
<div>7</div>
</button>
<button class='sourceButton' id='s7' data-role="none">7</button>
<br/>
<button class='sourceButton' id='s8' data-role="none">
<div>8</div>
</button>
<button class='sourceButton' id='s8' data-role="none">8</button>
<br/>
</div>
......
......@@ -89,36 +89,23 @@ body {
.sourceButton{
margin : -3px;
padding: 0;
background-color: transparent;
background-color: green;
border-radius: 50%;
border: 3px solid transparent;
width: 30px;
height: 30px;
border: 5px solid transparent;
width: 35px;
height: 35px;
opacity: 0.8;
display: block;
}
.sourceButton div {
padding: 0;
opacity: 0.8;
border-radius: 50%;
width: 23px;
height: 23px;
background-color: green;
text-align: center;
font-size: 130%;
display: block;
}
/*.sourceButton:hover {
background-color: green;
}*/
#sourceSlectDiv {
#sourceSelectDiv {
position : absolute;
top : 40px;
right: 10px;
z-index : 4;
}
.ui-checkbox input, .ui-radio input {
width: 20px;
height: 20px;
......
......@@ -9,17 +9,16 @@ Traj.Utils = {
//events utilities
getStartEventName : function(){
return Traj.onmobile ? 'touchestart' : 'mousedown';
}
return Traj.onmobile ? 'touchstart' : 'mousedown';
},
getMoveEventName : function(){
return Traj.onmobile ? 'touchemove' : 'mousemove';
}
return Traj.onmobile ? 'touchmove' : 'mousemove';
},
getEndEventName : function(){
return Traj.onmobile ? 'toucheend' : 'mouseup';
}
return Traj.onmobile ? 'touchend' : 'mouseup';
},
ongoingTouchIndexById : function(idToFind) {
var i = 0, id;
......
......@@ -111,8 +111,10 @@ Traj.Events = {
lastCoords = Traj.Utils.convertCanvasPosIntoUnits(Traj.View.last_event_pos),
translateXY = [coords[0] - lastCoords[0], coords[1] - lastCoords[1]],
curve = Traj.Manager.trajectories[Traj.Manager.currentCurveIndex];
curve.translate(translateXY[0] + curve.X[0],translateXY[1] + curve.Y[0],curve.Z[0]);
if(curve){
curve.translate(translateXY[0] + curve.X[0],translateXY[1] + curve.Y[0],curve.Z[0]);
}
Traj.View.current_repaint();
Traj.View.last_event_pos = evt_pos;
}
......@@ -174,8 +176,8 @@ Traj.Events = {
var evt_pos = Traj.Utils.event2CanvasPos(evt.changedTouches[0]);
var coords = Traj.Utils.convertCanvasPosIntoUnits(evt_pos);
Traj.View.traj_repaint();
var curveSelected = Traj.Utils.getClosestCurveFromTouch(coords);
Traj.Manager.selectCurve(curveSelected);
var curveSelected = Traj.Manager.getClosestCurveFromTouch(coords);
Traj.Manager.selectCurve(curveSelected);
}
for (var k=0; k<evt.changedTouches.length;k++) { // boucle sur tous les touchés
......@@ -507,8 +509,9 @@ Traj.Events = {
Traj.View.drawPoint(dyn_ctx,Traj.Utils.convertUnitsIntoCanvasPos(center) , 18);
// draw line TODO : put it in a function and call it on touchstart for 2 fingers (plot it in an other canvas to avoid multiple draws)
var point1 = [2*Traj.Events.touches[0][0]-Traj.Events.touches[1][0],2*Traj.Events.touches[0][1]-Traj.Events.touches[1][1]];
var point2 = [2*Traj.Events.touches[1][0]-Traj.Events.touches[0][0],2*Traj.Events.touches[1][1]-Traj.Events.touches[0][1]];
var point1 = [2*Traj.Events.touches[0][0]-Traj.Events.touches[1][0], 2*Traj.Events.touches[0][1]-Traj.Events.touches[1][1]];
var point2 = [2*Traj.Events.touches[1][0]-Traj.Events.touches[0][0], 2*Traj.Events.touches[1][1]-Traj.Events.touches[0][1]];
dyn_ctx.beginPath();
dyn_ctx.moveTo(point1[0],point1[1]);
dyn_ctx.lineTo(point2[0],point2[1]);
......@@ -627,18 +630,12 @@ Traj.Events = {
}
};
var curveLbl = document.getElementById("lbl_current_curve");
var curveButton = document.getElementById("curveMenuButton");
var curveLbl = document.getElementById("lbl_current_curve"),
curveButton = document.getElementById("curveMenuButton");
if (Traj.onmobile) {
curveLbl.addEventListener("touchstart",openMenu);
curveButton.addEventListener("touchstart",openMenu);
Traj.View.dyn_canvas.addEventListener("touchstart", closeMenu, false);
} else {
curveLbl.addEventListener("mousedown",openMenu);
curveButton.addEventListener("mousedown",openMenu);
Traj.View.dyn_canvas.addEventListener("mousedown",closeMenu ,false);
}
curveLbl.addEventListener(Traj.Utils.getStartEventName(),openMenu);
curveButton.addEventListener(Traj.Utils.getStartEventName(),openMenu);
Traj.View.dyn_canvas.addEventListener(Traj.Utils.getStartEventName(), closeMenu, false);
$('#action').on('click',function() {buttonCurveMenuPressed('action');});
$('#prop').on('click',function() {buttonCurveMenuPressed('prop');});
......@@ -707,24 +704,17 @@ Traj.Events = {
Traj.Events.idRotateRight = [];
};
var rotateLeft = document.getElementById("rotateLeft");
var rotateRight = document.getElementById("rotateRight");
if (Traj.onmobile) {
rotateLeft.addEventListener('touchstart', startRotateLeft, false);
rotateLeft.addEventListener('touchend', endRotateLeft, false);
rotateRight.addEventListener('touchstart', startRotateRight, false);
rotateRight.addEventListener('touchend', endRotateRight, false);
} else {
rotateLeft.addEventListener('mousedown', startRotateLeft, false);
rotateLeft.addEventListener('mouseup', endRotateLeft, false);
rotateRight.addEventListener('mousedown', startRotateRight, false);
rotateRight.addEventListener('mouseup', endRotateRight, false);
}
var rotateLeft = document.getElementById("rotateLeft"),
rotateRight = document.getElementById("rotateRight");
rotateLeft.addEventListener(Traj.Utils.getStartEventName(), startRotateLeft, false);
rotateLeft.addEventListener(Traj.Utils.getEndEventName(), endRotateLeft, false);
rotateRight.addEventListener(Traj.Utils.getStartEventName(), startRotateRight, false);
rotateRight.addEventListener(Traj.Utils.getEndEventName(), endRotateRight, false);
},
addSourceButtonEvent : function() { // evt for source buttons
var buttons = document.getElementsByClassName('sourceButton'),
startr_event_name = Traj.Util.getStartEventName();
var buttons = document.getElementsByClassName('sourceButton');
var selectSource = function(source) {
Traj.Events.selectSourceButton(source);
......@@ -741,9 +731,11 @@ Traj.Events = {
}
};
//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].children[0].style.background=Traj.View.default_colors[k];
buttons[k].addEventListener(start_=event_name, selectSource.bind(null,k+1));
buttons[k].style.background=Traj.View.default_colors[k];
buttons[k].addEventListener(Traj.Utils.getStartEventName(), selectSource.bind(null,k+1));
}
},
......@@ -790,15 +782,14 @@ Traj.Events = {
},
selectSourceButton : function(sourceNumber) { // change the apparence of the sources buttons
selectSourceButton : function(sourceNumber) {
// change the apparence of the sources buttons
var buttons = document.getElementsByClassName('sourceButton');
for (var k=0;k<buttons.length;k++) {
buttons[k].style.background='transparent';
buttons[k].style.borderColor='transparent';
}
if (sourceNumber<9) {
buttons[sourceNumber-1].style.background = Traj.View.default_colors[sourceNumber-1];
buttons[sourceNumber-1].style.borderColor = 'black';//Traj.View.default_colors[sourceNumber-1];
buttons[sourceNumber-1].style.borderColor = 'black';
}
},
......@@ -826,13 +817,9 @@ Traj.Events = {
handleTouchNew();
}
};
if (Traj.onmobile) {
circularButton.addEventListener('touchstart',handleTouchCircular,false);
concatButton.addEventListener('touchstart',handleTouchConcat,false);
} else {
circularButton.addEventListener('mousedown',handleTouchCircular,false);
concatButton.addEventListener('mousedown',handleTouchConcat,false);
}
circularButton.addEventListener(Traj.Utils.getStartEventName(),handleTouchCircular,false);
concatButton.addEventListener(Traj.Utils.getStartEventName(),handleTouchConcat,false);
},
hideContextMenu : function() {
var divMenu = document.getElementById("contextMenu");
......@@ -912,10 +899,9 @@ Traj.Events = {
}
}
var event_name = Traj.onmobile ? "touchestart" : "mousedown";
playButton.addEventListener(event_name,playPause,false);
multiplayButton.addEventListener(event_name,multiplay,false);
playButton.addEventListener(Traj.Utils.getStartEventName(),playPause,false);
multiplayButton.addEventListener(Traj.Utils.getStartEventName(),multiplay,false);
},
////////////////////////////////////
......
......@@ -260,8 +260,10 @@ Traj.Manager = {
},
selectCurve : function(index) {
if (isNaN(index) || index <0)
if (isNaN(index) || index <0){
index = 0;
}
var lastCurveIdx = Traj.Manager.currentCurveIndex;
Traj.Manager.currentCurveIndex = index;
Traj.Manager.currentCurveLbl.innerHTML = "" + Traj.Manager.currentCurveIndex;
......@@ -279,7 +281,7 @@ Traj.Manager = {
getClosestCurveFromTouch : function(pos) {
var trajectories = Traj.TrajManager.trajectories;
var trajectories = Traj.Manager.trajectories;
var curve = {};
var minDistance = Infinity;
var distance = 0;
......
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