Commit 11c2f893 authored by Jérémie Garcia's avatar Jérémie Garcia
Browse files

removed curve menu functionalities

Extended Canvas
Less options but more visibility
Draw Zone change to a Square
parent 84e57a01
WOB/qr_code.png

627 Bytes | W: | H:

WOB/qr_code.png

510 Bytes | W: | H:

WOB/qr_code.png
WOB/qr_code.png
WOB/qr_code.png
WOB/qr_code.png
  • 2-up
  • Swipe
  • Onion skin
......@@ -94,18 +94,21 @@
<option value="on">On</option>
</select>
</form>
</div>
<div id="TopMenu" >
<div class="left">
<a href="#" onClick="javascript:Traj.Manager.selectPreviousCurve();" data-role="button" data-iconpos="notext" data-icon="arrow-l" data-inline="true">Previous</a>
<a id="lbl_current_curve" data-role="button" data-inline="true" style="background: rgba(255, 255, 255, 0.7);" data-inline="true">0</a>
<a href="#" onClick="javascript:Traj.Manager.selectNextCurve();" data-role="button" data-iconpos="notext" data-icon="arrow-r" data-inline="true">Next</a>
<a href="#" onClick="javascript:Traj.Manager.deleteCurrentCurve();" data-role="button" data-iconpos="notext" data-icon="delete" data-inline="true">Remove</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>
</div>
<div id="header" data-role="header" class="ui-bar-a ui-header">
<a id="curveMenuButton" data-role="button" data-icon="gear" data-mini="true" data-inline="true" data-inline="true">Curve</a>
<a href="#settings-panel" data-icon="gear" class="ui-btn-right">Settings</a>
<h1 class="ui-title">Trajectoires</h1>
<!-- /header <a href="#settings-panel" data-icon="gear" class="ui-btn-right">OSC</a>-->
</div>
<!-- /header -->
<div id="sourceSelectDiv">
<button class='sourceButton' id='s1' data-role="none">1</button>
......@@ -135,129 +138,27 @@
<div id='drawZone' data-role="none">
<svg id="drawzoneSVG" width="100" height="160" xmlns="http://www.w3.org/2000/svg">
<g>
<!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
<ellipse id='drawZoneEl' ry="90" rx="61" id="svg_8" cy="86" cx="25" fill-opacity='0.6' fill="#ccf2a7" />
</g>
</svg>
<img id='drawZoneImg' src="libs/crayon.jpg" alt="image crayon" />
</div>
<div id="divCurveMenu" class="left">
<a href="#" onClick="javascript:Traj.Manager.selectPreviousCurve();" data-mini="true" data-role="button" data-iconpos="notext" data-icon="arrow-l" data-inline="true">Previous</a>
<a id="lbl_current_curve" data-role="button" data-mini="true" data-inline="true" style="background: rgba(255, 255, 255, 0.7);" data-inline="true">0</a>
<a href="#" onClick="javascript:Traj.Manager.selectNextCurve();" data-mini="true" data-role="button" data-iconpos="notext" data-icon="arrow-r" data-inline="true">Next</a>
<div id="divCurveOptions" class="ui-bar ui-bar-a">
<div class="curveMenuButtonDiv">
<a id='action' class="curveMenuButton" data-mini="true" data-role="none">Actions</a>
<a id='prop' class="curveMenuButton" data-mini="true" data-role="none">Transform</a>
<a id='multi' class="curveMenuButton" data-mini="true" data-role="none">Multiplay</a>
</div>
<div id="divCurveAction" class="ui-bar ui-bar-a">
<a href="#" onClick="javascript:Traj.manager.deleteCurrentCurve();" data-mini="true" data-role="button" data-icon="delete">Remove</a>
<a href="#" onClick="javascript:Traj.Manager.updateModeSelectEdit();" data-mini="true" data-role="button" data-icon="edit">Select and redraw</a>
<a href="#" onClick="javascript:Traj.manager.duplicateCurrentCurve();" data-mini="true" data-role="button">Duplicate</a>
<a href="#" onClick="javascript:Traj.manager.copyCurrentCurve();" data-mini="true" data-role="button">Copy</a>
<a href="#" onClick="javascript:Traj.manager.pasteInCurrentCurve();" data-mini="true" data-role="button">Paste</a>
<div class="ui-bar ui-bar-a">
<label>Simplify Curve</label>
<fieldset data-role="controlgroup" data-type="horizontal">
<a onclick="javascript:Traj.Manager.simplifyCurrentCurve(0.01)" data-inline="true" data-mini="true" data-role="button"> Soft </a>
<a onclick="javascript:Traj.Manager.simplifyCurrentCurve(0.1)" data-inline="true" data-mini="true" data-role="button"> Hard </a>
</fieldset>
</div>
</div>
<div id="divCurveProp" class="ui-bar ui-bar-a">
<div id="spaceStretchDiv" class="ui-bar ui-bar-a" style="float:left">
<label>Space stretch</label>
<div data-inline="true" style="float:left">
<fieldset data-role="controlgroup" data-type="vertical">
<a class="content" data-role="none">x </a>
<a onClick="javascript:changeScale('x',1.2);" class="miniButton" data-role="button" data-theme="a"> + </a>
<a onClick="javascript:changeScale('x',0.8);" class="miniButton" data-role="button" data-theme="a"> - </a>
<a onClick="javascript:mirror('x');" class="miniButtonText" data-role="button" data-theme="a"> Mirror </a>
</fieldset>
</div>
<div data-inline="true" style="float:left">
<fieldset data-role="controlgroup" data-type="vertical">
<a class="content" data-role="none">y </a>
<a onClick="javascript:Traj.Manager.changeScale('y',1.2);" class="miniButton" data-role="button" data-theme="a"> + </a>
<a onClick="javascript:Traj.Manager.changeScale('y',0.8);" class="miniButton" data-role="button" data-theme="a"> - </a>
<a onClick="javascript:mirror('y');" class="miniButtonText" data-role="button" data-theme="a"> Mirror </a>
</fieldset>
</div>
<div data-inline="true" style="float:left">
<fieldset data-role="controlgroup" data-type="vertical">
<a class="content" data-role="none">z </a>
<a onClick="javascript:Traj.Manager.changeScale('z',1.2);" class="miniButton" data-role="button" data-theme="a"> + </a>
<a onClick="javascript:Traj.Manager.changeScale('z',0.8);" class="miniButton" data-role="button" data-theme="a"> - </a>
<a onClick="javascript:Traj.Manager.mirror('z');" class="miniButtonText" data-role="button" data-theme="a"> Mirror </a>
</fieldset>
</div>
<div data-inline="true" style="float:left">
<fieldset data-role="controlgroup" data-type="vertical">
<a class="content" data-role="none" style="padding-left:4px!important">rotate </a>
<a id="rotateLeft" class="miniButton" data-role="button" data-theme="a" data-icon="back"> </a>
<a id="rotateRight" class="miniButton" data-role="button" data-theme="a" data-icon="forward"> </a>
</fieldset>
</div>
</div>
<div id="timeStretchDiv" class="ui-bar ui-bar-a" style="float:left">
<label>Time stretch</label>
<input type="number" data-role='none' id="timeStretch" data-inline="true" value="1" onchange="javascript:changeTime()" style="width:80px;" /> ms
<a onClick="javascript:Traj.Manager.mirror('t');" data-inline="true" class="miniButtonText" data-role="button" data-theme="a"> Reverse </a>
</div>
<div id="positionDiv" class="ui-bar ui-bar-a" style="float:left">
<label>First point position</label>
<input data-role='none' type="number" id="xOriPos" value="1" data-inline="true" onchange="javascript:Traj.Manager.translateCurve()" />x
<input data-role='none' type="number" id="yOriPos" value="1" data-inline="true" onchange="javascript:Traj.Manager.translateCurve()" />y
<input data-role='none' type="number" id="zOriPos" value="1" data-inline="true" onchange="javascript:Traj.Manager.translateCurve()" />z
</div>
</div>
<div id="divCurveMulti" class="ui-bar ui-bar-a">
<div class="ui-bar ui-bar-a">
<label>Source controled</label>
<input data-role='none' type="number" id="sourceControled" value="1" onchange="javascript:Traj.Manager.changeSourceControled()" />
</div>
<label>
<input type="checkbox" id="checkPlay" onchange="javascript:Traj.Manager.activeMultiPlay()"> Active
</label>
<label>
<a data-role="button" onclick="javascript:removeMultiPlay()">Remove all </a>
</label>
</div>
</div>
<div style="margin-top: 40px">Hold to draw a new curve</div>
</div>
<div id="sessionDiv">
<a id="lblCurrentSession" data-role="button" data-mini="true" data-inline="true" data-inline="true">0</a>
<div id="sessionDivOverCanvas">
<a onClick="javascript:Traj.Session.selectPreviousSession();" data-inline="true" data-mini="true" data-role="button" data-iconpos="notext" data-icon="arrow-l"> Previous </a>
<a onClick="javascript:Traj.Session.selectNextSession();" data-inline="true" data-mini="true" data-role="button" data-iconpos="notext" data-icon="arrow-r"> Next </a>
<a onClick="javascript:Traj.Session.newSession();" data-inline="true" data-mini="true" data-role="button" data-icon="plus" data-iconpos="notext"> New </a>
<a onClick="javascript:Traj.Session.deleteSelectedSession();" data-inline="true" data-mini="true" data-role="button" data-icon="delete" data-iconpos="notext"> Delete </a>
<a onClick="javascript:Traj.Session.selectPreviousSession();" data-inline="true" data-role="button" data-iconpos="notext" data-icon="arrow-l"> Previous </a>
<a onClick="javascript:Traj.Session.selectNextSession();" data-inline="true" data-role="button" data-iconpos="notext" data-icon="arrow-r"> Next </a>
<a onClick="javascript:Traj.Session.newSession();" data-inline="true" data-role="button" data-icon="plus" data-iconpos="notext"> New </a>
<a onClick="javascript:Traj.Session.deleteSelectedSession();" data-inline="true" data-role="button" data-icon="delete" data-iconpos="notext">Delete</a>
</div>
</div>
<div class="canvas-left-overlay" id="playDiv">
<div data-role="controlgroup" data-type="horizontal" >
<a onClick="javascript:Traj.View.setCanvasZoom(0.8);" data-role="button" data-theme="a" data-inline="true" style="background: rgba(250, 250, 250, 0.5);"> - </a>
<a onClick="javascript:Traj.View.setCanvasZoom(1.2);" data-role="button" data-theme="a" data-inline="true" style="background: rgba(250, 250, 250, 0.5);"> + </a>
<a onClick="javascript:Traj.View.setCanvasZoom(0.8);" data-role="button" data-theme="a" data-inline="true" style="background: rgba(250, 250, 250, 0.7);"> - </a>
<a onClick="javascript:Traj.View.setCanvasZoom(1.2);" data-role="button" data-theme="a" data-inline="true" style="background: rgba(250, 250, 250, 0.7);"> + </a>
</div>
<div data-role="controlgroup" data-type="vertical">
<a id="playButton" data-role="button" data-theme="a" style="background: rgba(250, 250, 250, 0.5); padding: 5px; width:50px; height:30px; line-height: 30px;">Play</a>
<a id="multiplayButton" data-role="button" data-theme="a" style="background: rgba(250, 250, 250, 0.5);padding: 5px; width:50px;height:30px; line-height: 30px;">Multi</a>
<a id="playButton" data-role="button" data-theme="a" style="background: rgba(250, 250, 250, 0.7); padding: 5px; width:50px; height:30px; line-height: 30px;">Play</a>
<a id="multiplayButton" data-role="button" data-theme="a" style="background: rgba(250, 250, 250, 0.7);padding: 5px; width:50px;height:30px; line-height: 30px;">Multi</a>
</div>
</div>
......
......@@ -101,7 +101,7 @@ body {
#sourceSelectDiv {
position : absolute;
top : 40px;
top : 60px;
right: 10px;
z-index : 4;
}
......@@ -148,12 +148,18 @@ body {
margin: 0px;
}
.top-right {
position: absolute;
right: 0;
opacity: 0.8;
z-index: 5;
}
.left {
position: absolute;
left: 0;
opacity: 0.8;
z-index: 5;
width : 280px;
}
a.curveMenuButton {
......@@ -178,33 +184,6 @@ a.curveMenuButton {
font: 13px Arial;
}
.curveMenuButtonDiv {
/* style basique */
width: 100%;
margin-bottom: 0px;
border: 1px solid #666666;
border-bottom-color: #ECEDEE;
font: 15px Arial;
/* instaure la flexbox */
display: -webkit-flex;
-webkit-flex-direction: row;
display: flex;
flex-direction: row;
}
.curveMenuButtonDiv > a {
-webkit-flex: 1 1 auto;
flex: 1 1 auto;
width: 30px; /* Pour faire fonctionner correctement la transition. (Les transitions vers "width:auto" sont buggées dans Gecko et Webkit, au moins. Voir http://bugzil.la/731886 pour plus d'informations.) */
-webkit-transition: width 0.7s ease-out;
transition: width 0.7s ease-out;
border-radius: 2px;
border-left: 0px;
border-color: #666666;
}
.curveMenuButton:first-child {
border-left: 1px solid #666666;
}
......@@ -233,22 +212,10 @@ a.curveMenuButton {
#sessionDivOverCanvas {
position: absolute;
left: 0;
bottom: 50px;
bottom: 40px;
width:200px;
z-index: 4;
background-color: rgba(255, 255, 255, 1);
}
#curveMenuDiv {
position: absolute;
top:0;
left:0;
}
#divCurveOptions {
padding: 0px;
margin: 0px;
background-color: rgba(255, 255, 255, 1);
background-color: rgba(255, 255, 255, 0.8);
}
......@@ -270,12 +237,6 @@ a.curveMenuButton {
height:40px;
}
/*#footer > a {
padding-bottom: 3px;
padding-top: 3px;
margin-bottom: 1px;
}*/
#spaceStretchDiv > input {
width: 50px;
......@@ -300,52 +261,22 @@ a.curveMenuButton {
#drawZone {
position: absolute;
bottom:65px;
background-color: rgba(50,250,50,0.4);
bottom:45px;
left:0px;
width:100px;
height: 140px;
z-index: 4;
}
#drawZoneEl {
position: relative;
z-index: 4;
}
#drawZoneRight {
position: absolute;
bottom:65px;
right:0px;
width:100px;
height: 140px;
width:80px;
height: 180px;
z-index: 4;
}
#drawZoneImg {
position: absolute;
bottom: 10px;
left:8px;
opacity: 0.5;
width: 60px;
height: 80px;
z-index:0 ;
}
#drawZoneImgRight {
position: absolute;
bottom: 10px;
left:35px;
opacity: 0.5;
width: 60px;
height: 80px;
z-index:0 ;
font-size: 18px;
text-align: center;
}
.contextualButton{
background-color: white;
border: 1px solid black;
border-radius: 50%;
border: 3px solid black;
opacity: 0.8;
font-size: 10px;
font-size: 14px;
}
.circularButton {
......
......@@ -63,7 +63,7 @@ Traj.View = {
//positions of the hearder and footer in pixels$
//TODO us the actual size of the html code
var header = 40,
var header = 0,
right = 0,
foot = 40,
canvas_width = window.innerWidth - right,
......
/*
Event manager handling both mutlitouch or mous events
Event manager handling both mutlitouch or mouse events
TODO: Handle both TOuch and Mouse events (for surface or new devices..)
*/
Traj.Events = {
......@@ -337,19 +337,14 @@ Traj.Events = {
this.addOrientationEvents();
this.initSlider(false);
this.initZSlider();
//events for the Curve Menu
this.addCurveButton();
Traj.Events.addRotationEvt();
//Menu popping after drawing a shape
Traj.Events.initContextMenu();
//Source selection buttons with events
Traj.Events.addSourceButtonEvent();
Traj.Events.hideLongTouchMenu();
Traj.Events.addPlayPauseEvent();
//Menu popping after drawing a shape
Traj.Events.initContextMenu();
},
......@@ -536,13 +531,12 @@ Traj.Events = {
},
addSessionButtonEvents : function() {
var eventname = Traj.mobile ? "touchstart" : "mousedown",
sessionDivOverCanvas = $('#sessionDivOverCanvas'),
sessionDiv = document.getElementById("lblCurrentSession");
sessionDivOverCanvas.hide();
sessionDivOverCanvas.addClass( "hide" );
sessionDiv.addEventListener(eventname,function(){
sessionDiv.addEventListener(Traj.Utils.getStartEventName(),function(){
if (sessionDivOverCanvas.hasClass("hide")) {
sessionDivOverCanvas.show();
sessionDivOverCanvas.removeClass( "hide" ).addClass( "show" );
......@@ -551,7 +545,7 @@ Traj.Events = {
sessionDivOverCanvas.removeClass( "show" ).addClass( "hide" );
}
});
Traj.View.dyn_canvas.addEventListener(eventname, function() {
Traj.View.dyn_canvas.addEventListener(Traj.Utils.getStartEventName(), function() {
if (sessionDivOverCanvas.hasClass("show")) {
sessionDivOverCanvas.hide();
sessionDivOverCanvas.removeClass( "show" ).addClass( "hide" );
......@@ -559,160 +553,6 @@ Traj.Events = {
}, false);
},
addCurveButton : function() {
// initialisation
$("#divCurveOptions").hide();
$("#divCurveOptions").addClass( "hide" );
var openMenu = function() {
Traj.Events.refreshCurveInfo();
if ($("#divCurveOptions").hasClass("hide")) {
$("#divCurveOptions").show();
$("#divCurveOptions").removeClass( "hide" ).addClass( "show" );
$("#playDiv").hide();
} else if ($("#divCurveOptions").hasClass("show")) {
$("#divCurveOptions").hide();
$("#divCurveOptions").removeClass( "show" ).addClass( "hide" );
$("#playDiv").show();
}
};
var closeMenu = function() {
if ($("#divCurveOptions").hasClass("show")) {
$("#divCurveOptions").hide();
$("#divCurveOptions").removeClass( "show" ).addClass( "hide" );
$("#playDiv").show();
}
};
var buttonCurveMenuPressed = function(button) {
var colorGrey = '#ECEDEE',
colorBlack = '#666666',
colorWhite = '#FBFBFB',
divCurveAction = $("#divCurveAction"),
divCurveProp = $("#divCurveProp"),
divCurveMulti = $("#divCurveMulti"),
action = $("#action"),
prop = $("#prop"),
multi = $("#multi");
if (button == 'action') {
//console.log('action');
divCurveAction.show();
action.css('background-color',colorGrey); // passer en code natif
action.css('border-bottom-color',colorGrey);
divCurveProp.hide();
prop.css('background-color',colorWhite);
prop.css('border-bottom-color',colorBlack);
divCurveMulti.hide();
multi.css('background-color',colorWhite);
multi.css('border-bottom-color',colorBlack);
} else if (button == 'prop') {
//console.log('prop');
divCurveAction.hide();
action.css('background-color',colorWhite);
action.css('border-bottom-color',colorBlack);
divCurveProp.show();
prop.css('background-color',colorGrey);
prop.css('border-bottom-color',colorGrey);
divCurveMulti.hide();
multi.css('background-color',colorWhite);
multi.css('border-bottom-color',colorBlack);
} else if (button == 'multi') {
//console.log('multi');
divCurveAction.hide();
action.css('background-color',colorWhite);
action.css('border-bottom-color',colorBlack);
divCurveProp.hide();
prop.css('background-color',colorWhite);
prop.css('border-bottom-color',colorBlack);
divCurveMulti.show();
multi.css('background-color',colorGrey);
multi.css('border-bottom-color',colorGrey);
}
};
var curveLbl = document.getElementById("lbl_current_curve"),
curveButton = document.getElementById("curveMenuButton");
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');});
$('#multi').on('click',function() {buttonCurveMenuPressed('multi');});
buttonCurveMenuPressed('action');
},
refreshCurveInfo : function() { // actualise les informations du curveMenu et des boutons de sources
var index = Traj.Manager.currentCurveIndex;
var curve = Traj.Manager.trajectories[index];
if (Traj.Manager.trajectories[index]) {
// time info
var timeNumber = document.getElementById('timeStretch');
timeNumber.value = curve.lengthTime();
// position first point
var xOriPosBox = document.getElementById('xOriPos');
var yOriPosBox = document.getElementById('yOriPos');
var zOriPosBox = document.getElementById('zOriPos');
xOriPosBox.value = curve.X[0].toFixed(2);
yOriPosBox.value = curve.Y[0].toFixed(2);
zOriPosBox.value = curve.Z[0].toFixed(2);
// source number and multiplay
document.getElementById("sourceControled").value = curve.sourceNumber;
$("#checkPlay").prop('checked', curve.multiPlay).checkboxradio("refresh");
Traj.Events.selectSourceButton(curve.sourceNumber);
} else {
document.getElementById("sourceControled").value = 1;
$("#checkPlay").prop('checked', false).checkboxradio("refresh");
}
},
addRotationEvt : function() { // event for rotate buttons
var rotateCurve = function rotateCurve(angle) {
var curve = Traj.Manager.trajectories[Traj.Manager.currentCurveIndex];
var timeSliderValue = Traj.Events.getSliderValue();
if (curve == undefined) {
return;
}
var center = Traj.Utils.interpolate(timeSliderValue,curve);
center.splice(0,1);
curve.rotate(center,angle);
Traj.Manager.selectCurve(Traj.Manager.currentCurveIndex);
Traj.Events.sliderOnChange();
};
var startRotateLeft = function startRotateLeft(evt) {
evt.preventDefault();
var angle = 2;
rotateCurve(angle);
Traj.Events.idRotateLeft.push(setInterval(function(){ rotateCurve(angle); angle=angle+2; }, 200));
};
var startRotateRight = function startRotateRight(evt) {
evt.preventDefault();
var angle = 2;
rotateCurve(-angle);
Traj.Events.idRotateRight.push(setInterval(function(){ rotateCurve(-angle);angle=angle+2 }, 200));
};
var endRotateLeft = function endRotate(evt) {
clearInterval(Traj.Events.idRotateLeft);
Traj.Events.idRotateLeft = [];
};
var endRotateRight = function endRotate(evt) {
clearInterval(Traj.Events.idRotateRight);
Traj.Events.idRotateRight = [];
};
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');
......@@ -741,24 +581,21 @@ Traj.Events = {
addDrawZoneEvent : function() { // evt for bi-manual use for drawing
var drawZone = document.getElementById('drawZoneEl');
var drawZoneImg = document.getElementById('drawZoneImg');
var drawZoneDiv = document.getElementById('drawZone');
var drawZone = document.getElementById('drawZone');
var handleStart = function(evt) {
var handleDrawStart = function(evt) {
evt.preventDefault();
//console.log('draw zone touched');
$("#slider-div").hide();
$(".canvas-left-overlay").hide();
$("#divCurveMenu").hide();
$("#TopMenu").hide();
Traj.Events.drawing = true;
Traj.Events.selectSourceButton(Traj.Manager.currentSource);
};
var handleEnd = function() {
var handleDrawEnd = function() {
$("#slider-div").show();
$(".canvas-left-overlay").show();
$("#divCurveMenu").show();
$("#TopMenu").show();
var currentCurveIndex = Traj.Manager.currentCurveIndex;
var curve = Traj.Manager.trajectories[currentCurveIndex];
......@@ -771,10 +608,8 @@ Traj.Events = {
}
};
drawZone.addEventListener('touchstart',handleStart,false)