Skip to content
GitLab
Menu
Projects
Groups
Snippets
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
Jeremie Garcia
Trajectoires
Commits
7575e5bc
Commit
7575e5bc
authored
Jan 19, 2016
by
Jérémie Garcia
Browse files
update multiplay and interface
parent
fdb6945f
Changes
8
Hide whitespace changes
Inline
Side-by-side
WOB/server/interfaces/Trajectoires.html
View file @
7575e5bc
...
...
@@ -55,13 +55,7 @@
</select>
</form>
<form>
<label
for=
"flip-loop"
>
Loop Mode:
</label>
<select
name=
"flip-loop"
id=
"flip-loop"
data-role=
"slider"
data-theme=
"b"
data-mini=
"true"
onchange=
"javascript:Traj.Player.updateLoopMode()"
>
<option
value=
"off"
selected=
"selected"
>
Off
</option>
<option
value=
"on"
>
On
</option>
</select>
</form>
<form>
<label
for=
"flip-timeSlider"
>
Show Time Slider:
</label>
...
...
@@ -125,9 +119,21 @@
<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.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>
<form>
<label
for=
"flip-loop"
style=
"font-size:small"
>
Loop Mode:
</label>
<input
type=
"checkbox"
data-role=
"flipswitch"
name=
"flip-loop"
id=
"flip-loop"
data-theme=
"c"
onchange=
"javascript:Traj.Player.updateLoopMode();"
>
<label
for=
"flip-PlayMode"
style=
"font-size:small"
>
MultiPlay:
</label>
<input
type=
"checkbox"
data-role=
"flipswitch"
name=
"flip-PlayMode"
id=
"flip-PlayMode"
data-theme=
"d"
onchange=
"javascript:Traj.Player.updatePlayMode();"
>
</form>
<div
style=
"height:20px"
>
</div>
<a
id=
"playButton"
data-role=
"button"
data-theme=
"a"
style=
"background: rgba(250, 250, 250, 0.8); padding: 5px; width:50px; height:30px; line-height: 30px;"
>
Play
</a>
</div>
</div>
...
...
WOB/server/interfaces/css/index.css
View file @
7575e5bc
...
...
@@ -76,7 +76,7 @@ body {
.canvas-left-overlay
{
position
:
absolute
;
top
:
3
0%
;
top
:
1
0%
;
left
:
0
;
vertical-align
:
center
;
z-index
:
3
;
...
...
WOB/server/interfaces/js/Player.js
View file @
7575e5bc
...
...
@@ -3,414 +3,122 @@ Traj.Player = {
loopMode
:
false
,
requestId
:
undefined
,
loopID
:
undefined
,
isPlaying
:
false
,
loopID
:
undefined
,
isPlaying
:
false
,
isMulti
:
false
,
play
:
function
()
{
this
.
playCurrentCurve
();
},
playCurve
:
function
(
curveIdx
)
{
this
.
stopCurrentCurve
();
Traj
.
Player
.
isPlaying
=
true
;
var
curve
=
Traj
.
Manager
.
trajectories
[
curveIdx
],
lengthTime
=
curve
.
lengthTime
(),
pointCoord
,
x
=
curve
.
X
[
0
],
y
=
curve
.
Y
[
0
],
xOld
=
curve
.
X
[
0
],
yOld
=
curve
.
Y
[
0
],
z
=
curve
.
Z
[
0
],
counter
=
0
,
orientation
=
[
0
,
0
,
0
],
idx
=
0
;
Traj
.
OSC
.
sendPlay
(
"
start
"
);
var
begin
=
new
Date
().
getTime
();
// check if the slider is not at the end (or mostly)
// if it is not, change the begin time (if it is, leave it to restart at the begining)
var
timeSliderPosition
=
Traj
.
Events
.
getSliderValue
();
if
(
timeSliderPosition
<
lengthTime
-
100
)
{
begin
-=
timeSliderPosition
;
}
var
now
=
new
Date
().
getTime
();
pointCoord
=
Traj
.
Utils
.
interpolate
(
now
-
begin
,
curve
);
xOld
=
pointCoord
[
0
];
yOld
=
pointCoord
[
1
];
(
function
loop
()
{
// get time for new frame
now
=
new
Date
().
getTime
()
-
begin
;
counter
=
(
counter
+
1
)
%
2
;
// can be use to render once of two loops
// actualize time slider
//if (counter ==1) {
Traj
.
Events
.
setSliderValue
(
now
);
//}
//find idx
idx
=
Traj
.
Utils
.
findPointIdx
(
now
,
curve
);
// [sourceNumber, X, Y, Z, t]
pointCoord
=
Traj
.
Utils
.
interpolate
(
now
,
curve
,
idx
);
x
=
pointCoord
[
0
];
y
=
pointCoord
[
1
];
z
=
pointCoord
[
2
];
orientation
=
pointCoord
[
4
];
if
(
!
isNaN
(
x
)
&&!
isNaN
(
y
))
{
Traj
.
OSC
.
streamPoint
(
curve
.
sourceNumber
,[
x
,
y
,
z
]);
Traj
.
OSC
.
sendOrientation
(
curve
.
sourceNumber
,
orientation
);
// Traj.OSC.sendSpatMessage( ['source', pointCoord[0], 'xyz',pointCoord[1], pointCoord[2], pointCoord[3]]);
Traj
.
View
.
dyn_repaint
();
// Traj.Player.repaintPoint(curve,[x,y]); // paint point
Traj
.
Player
.
repaintPointWithOrientation
(
curve
,[
x
,
y
],
orientation
);
// paint point
Traj
.
Player
.
repaintCurve
(
curve
,
idx
,
idx
-
1
);
// paint large curve
Traj
.
Events
.
setZSliderValue
(
z
);
}
// test if the curve is ended and if loop is activated
if
(
now
>
lengthTime
)
{
Traj
.
OSC
.
sendPlay
(
"
end
"
);
Traj
.
View
.
traj_repaint
();
if
(
Traj
.
Player
.
loopMode
)
{
Traj
.
Player
.
playCurrentCurve
();
return
;
}
Traj
.
Player
.
stopCurrentCurve
();
Traj
.
Player
.
isPlaying
=
false
;
return
;
}
Traj
.
Player
.
requestId
=
requestAnimationFrame
(
loop
);
}())
},
//This methods plays the curves from their indexes
playCurves
:
function
(
indexes
){
this
.
stopCurrentCurve
();
this
.
stopPlayActions
();
Traj
.
Player
.
isPlaying
=
true
;
var
curvesIdx
=
indexes
;
var
curveArray
=
[],
lengthTimeArray
=
[],
pointCoordArray
=
[],
xArray
=
[],
yArray
=
[],
xOldArray
=
[],
yOldArray
=
[],
idxArray
=
[],
idxOldArray
=
[],
counter
=
0
;
for
(
var
k
=
0
;
k
<
curvesIdx
.
length
;
k
++
)
{
var
curve
=
Traj
.
Manager
.
trajectories
[
curvesIdx
[
k
]];
if
(
typeof
curve
!==
undefined
){
var
lengthTime
=
curve
.
lengthTime
(),
pointCoord
,
x
=
curve
.
X
[
0
],
y
=
curve
.
Y
[
0
],
xOld
=
curve
.
X
[
0
],
yOld
=
curve
.
Y
[
0
],
idx
=
0
,
idxOld
=
0
;
curveArray
[
k
]
=
curve
;
pointCoordArray
[
k
]
=
pointCoord
;
xArray
[
k
]
=
x
;
yArray
[
k
]
=
y
;
xOldArray
[
k
]
=
xOld
;
yOldArray
[
k
]
=
yOld
;
idxArray
[
k
]
=
idx
;
idxOldArray
[
k
]
=
idxOld
;
}
}
var
begin
=
new
Date
().
getTime
();
// selection de la courbe la plus longue (pour le timeSlider)
//Find longest curves for the time slider range
var
longestCurveIdx
=
Traj
.
Manager
.
longestCurveIdxOfPlayedCurve
(
indexes
);
var
maxDuration
=
Traj
.
Manager
.
trajectories
[
longestCurveIdx
].
getDuration
();
Traj
.
Manager
.
selectCurve
(
longestCurveIdx
);
var
now
=
new
Date
().
getTime
();
for
(
var
k
=
0
;
k
<
curvesIdx
.
length
;
k
++
)
{
pointCoordArray
[
k
]
=
Traj
.
Utils
.
interpolate
(
now
-
begin
,
curveArray
[
k
]);
xOldArray
[
k
]
=
pointCoordArray
[
k
][
0
];
yOldArray
[
k
]
=
pointCoordArray
[
k
][
1
];
}
// check si le curseur du player est à la fin ou non et ajuste le begin de lecture
//time variables
var
begin
=
new
Date
().
getTime
(),
now
;
// check if the slider is not at the end (or near)
// if it is not, change the begin time (if it is, leave it to restart at the begining)
var
timeSliderPosition
=
Traj
.
Events
.
getSliderValue
();
if
(
timeSliderPosition
<
lengthTime
-
100
)
{
if
(
timeSliderPosition
<
maxDuration
-
100
)
{
begin
-=
timeSliderPosition
;
}
Traj
.
OSC
.
sendPlay
(
"
start
"
);
Traj
.
OSC
.
sendPlay
(
"
start
"
);
(
function
loopMulti
()
{
// get time for new frame
now
=
new
Date
().
getTime
()
-
begin
;
counter
=
(
counter
+
1
)
%
2
;
// clear dyn canvas = large point
Traj
.
View
.
dyn_repaint
();
// actualize time slider
// update the time slider
Traj
.
Events
.
setSliderValue
(
now
);
// clear dyn canvas
Traj
.
View
.
dyn_repaint
();
for
(
var
k
=
0
;
k
<
pointCoordArray
.
length
;
k
++
)
{
if
(
lengthTimeArray
[
k
])
{
idxArray
[
k
]
=
Traj
.
Utils
.
findPointIdx
(
now
,
curveArray
[
k
]);
pointCoordArray
[
k
]
=
Traj
.
Utils
.
interpolate
(
now
,
curveArray
[
k
],
idxArray
[
k
]);
xArray
[
k
]
=
pointCoordArray
[
k
][
0
];
yArray
[
k
]
=
pointCoordArray
[
k
][
1
];
if
(
!
isNaN
(
xArray
[
k
])
&&!
isNaN
(
yArray
[
k
]))
{
//if (counter == 1) {
//ussing Spat formatting source ID xyz x y z
var
pointCoord
=
pointCoordArray
[
k
];
Traj
.
OSC
.
sendSpatMessage
(
[
'
source
'
,
pointCoord
[
0
],
'
xyz
'
,
pointCoord
[
1
],
pointCoord
[
2
],
pointCoord
[
3
]]);
// Traj.OSC.sendPosxyzMsg(pointCoordArray[k]);
//}
Traj
.
Player
.
repaintPoint
(
curveArray
[
k
],[
xArray
[
k
],
yArray
[
k
]]);
xOldArray
[
k
]
=
xArray
[
k
];
yOldArray
[
k
]
=
yArray
[
k
];
Traj
.
Player
.
repaintCurve
(
curveArray
[
k
],
idxArray
[
k
],
idxOldArray
[
k
]);
idxOldArray
[
k
]
=
idxArray
[
k
];
}
// test if the curve is ended
if
(
now
>
lengthTimeArray
[
k
])
{
curveArray
.
splice
(
k
,
1
);
lengthTimeArray
.
splice
(
k
,
1
);
pointCoordArray
.
splice
(
k
,
1
);
xArray
.
splice
(
k
,
1
);
yArray
.
splice
(
k
,
1
);
xOldArray
.
splice
(
k
,
1
);
yOldArray
.
splice
(
k
,
1
);
}
}
}
if
(
xOldArray
.
length
<
1
)
{
Traj
.
OSC
.
sendPlay
(
"
end
"
);
Traj
.
View
.
traj_repaint
();
if
(
Traj
.
Player
.
loopMode
)
{
Traj
.
Player
.
isPlaying
=
false
;
//stop if the current time is less than the whole duration
if
(
now
>
maxDuration
){
//if loop mode then relaucnh the palying
if
(
Traj
.
Player
.
loopMode
)
{
Traj
.
Player
.
playCurves
(
indexes
);
return
;
//Traj.Player.loopID = setTimeout(function() {Traj.Player.playCurrentCurve();},500);
}
Traj
.
Player
.
stopCurrentCurve
();
Traj
.
Player
.
isPlaying
=
false
;
return
;
}
Traj
.
Player
.
requestId
=
requestAnimationFrame
(
loopMulti
);
}())
},
Traj
.
Player
.
stopPlayActions
();
return
;
}
else
{
playAllCurve
:
function
()
{
this
.
stopCurrentCurve
();
//process each curve
for
(
var
k
=
0
;
k
<
indexes
.
length
;
k
++
)
{
Traj
.
Player
.
isPlaying
=
true
;
var
multiplayButton
=
document
.
getElementById
(
'
multiplayButton
'
);
multiplayButton
.
innerHTML
=
'
Pause
'
;
var
curvesIdx
=
Traj
.
Manager
.
playedCurves
;
// A definir dans Manager
var
curveArray
=
[],
lengthTimeArray
=
[],
pointCoordArray
=
[],
xArray
=
[],
yArray
=
[],
xOldArray
=
[],
yOldArray
=
[],
idxArray
=
[],
idxOldArray
=
[],
counter
=
0
;
for
(
var
k
=
0
;
k
<
curvesIdx
.
length
;
k
++
)
{
var
curve
=
Traj
.
Manager
.
trajectories
[
curvesIdx
[
k
]],
lengthTime
=
curve
.
lengthTime
(),
pointCoord
,
x
=
curve
.
X
[
0
],
y
=
curve
.
Y
[
0
],
xOld
=
curve
.
X
[
0
],
yOld
=
curve
.
Y
[
0
],
idx
=
0
,
idxOld
=
0
;
curveArray
[
k
]
=
curve
;
lengthTimeArray
[
k
]
=
lengthTime
;
pointCoordArray
[
k
]
=
pointCoord
;
xArray
[
k
]
=
x
;
yArray
[
k
]
=
y
;
xOldArray
[
k
]
=
xOld
;
yOldArray
[
k
]
=
yOld
;
idxArray
[
k
]
=
idx
;
idxOldArray
[
k
]
=
idxOld
;
}
var
curve
=
Traj
.
Manager
.
trajectories
[
indexes
[
k
]];
Traj
.
OSC
.
sendPlay
(
"
start
"
);
var
begin
=
new
Date
().
getTime
();
// check si le curseur du player est à la fin ou non et ajuste le begin de lecture
var
timeSliderPosition
=
Traj
.
Events
.
getSliderValue
();
if
(
timeSliderPosition
<
lengthTime
-
100
)
{
begin
-=
timeSliderPosition
;
}
// selection de la courbe la plus longue (pour le timeSlider)
var
longestCurveIdx
=
Traj
.
Manager
.
longestCurveIdxOfPlayedCurve
();
Traj
.
Manager
.
selectCurve
(
longestCurveIdx
);
var
now
=
new
Date
().
getTime
();
for
(
var
k
=
0
;
k
<
curvesIdx
.
length
;
k
++
)
{
pointCoordArray
[
k
]
=
Traj
.
Utils
.
interpolate
(
now
-
begin
,
curveArray
[
k
]);
xOldArray
[
k
]
=
pointCoordArray
[
k
][
0
];
yOldArray
[
k
]
=
pointCoordArray
[
k
][
1
];
}
//do it only if the curve is not finished.
if
(
!
(
now
>
curve
.
getDuration
()))
{
(
function
loopMulti
()
{
// get time for new frame
now
=
new
Date
().
getTime
()
-
begin
;
counter
=
(
counter
+
1
)
%
2
;
var
idx
=
Traj
.
Utils
.
findPointIdx
(
now
,
curve
),
pointCoord
=
Traj
.
Utils
.
interpolate
(
now
,
curve
,
idx
),
x
=
pointCoord
[
0
],
y
=
pointCoord
[
1
],
z
=
pointCoord
[
2
],
orientation
=
pointCoord
[
4
];
// clear dyn canvas = large point
Traj
.
View
.
dyn_repaint
();
if
(
!
isNaN
(
x
)
&&!
isNaN
(
y
))
{
// actualize time slider
Traj
.
Events
.
setSliderValue
(
now
);
//Send OSC messages
Traj
.
OSC
.
streamPoint
(
curve
.
sourceNumber
,[
x
,
y
,
z
]);
Traj
.
OSC
.
sendOrientation
(
curve
.
sourceNumber
,
orientation
);
for
(
var
k
=
0
;
k
<
pointCoordArray
.
length
;
k
++
)
{
if
(
lengthTimeArray
[
k
])
{
idxArray
[
k
]
=
Traj
.
Utils
.
findPointIdx
(
now
,
curveArray
[
k
]);
pointCoordArray
[
k
]
=
Traj
.
Utils
.
interpolate
(
now
,
curveArray
[
k
],
idxArray
[
k
]);
xArray
[
k
]
=
pointCoordArray
[
k
][
0
];
yArray
[
k
]
=
pointCoordArray
[
k
][
1
];
if
(
!
isNaN
(
xArray
[
k
])
&&!
isNaN
(
yArray
[
k
]))
{
//if (counter == 1) {
//ussing Spat formatting source ID xyz x y z
var
pointCoord
=
pointCoordArray
[
k
];
Traj
.
OSC
.
sendSpatMessage
(
[
'
source
'
,
pointCoord
[
0
],
'
xyz
'
,
pointCoord
[
1
],
pointCoord
[
2
],
pointCoord
[
3
]]);
// Traj.OSC.sendPosxyzMsg(pointCoordArray[k]);
//}
Traj
.
Player
.
repaintPoint
(
curveArray
[
k
],[
xArray
[
k
],
yArray
[
k
]]);
xOldArray
[
k
]
=
xArray
[
k
];
yOldArray
[
k
]
=
yArray
[
k
];
Traj
.
Player
.
repaintCurve
(
curveArray
[
k
],
idxArray
[
k
],
idxOldArray
[
k
]);
idxOldArray
[
k
]
=
idxArray
[
k
];
}
//Update the display (paint playHead and curve segment)
Traj
.
Player
.
repaintPointWithOrientation
(
curve
,[
x
,
y
],
orientation
);
Traj
.
Player
.
repaintCurve
(
curve
,
idx
,
idx
-
1
);
// test if the curve is ended
if
(
now
>
lengthTimeArray
[
k
])
{
curveArray
.
splice
(
k
,
1
);
lengthTimeArray
.
splice
(
k
,
1
);
pointCoordArray
.
splice
(
k
,
1
);
xArray
.
splice
(
k
,
1
);
yArray
.
splice
(
k
,
1
);
xOldArray
.
splice
(
k
,
1
);
yOldArray
.
splice
(
k
,
1
);
//Update the Z-slider value for the longest curve only
if
(
indexes
[
k
]
===
longestCurveIdx
){
Traj
.
Events
.
setZSliderValue
(
z
);
}
}
}
}
}
if
(
xOldArray
.
length
<
1
)
{
Traj
.
OSC
.
sendPlay
(
"
end
"
);
Traj
.
View
.
traj_repaint
();
if
(
Traj
.
Player
.
loopMode
)
{
Traj
.
Player
.
isPlaying
=
false
;
Traj
.
Player
.
playAllCurve
();
return
;
//Traj.Player.loopID = setTimeout(function() {Traj.Player.playCurrentCurve();},500);
}
Traj
.
Player
.
stopCurrentCurve
();
Traj
.
Player
.
isPlaying
=
false
;
return
;
}
Traj
.
Player
.
requestId
=
requestAnimationFrame
(
loopMulti
);
Traj
.
Player
.
requestId
=
requestAnimationFrame
(
loopMulti
);
}
}())
},
playCurrentCurve
:
function
()
{
var
curveIdx
=
Traj
.
Manager
.
currentCurveIndex
,
curve
=
Traj
.
Manager
.
trajectories
[
curveIdx
];
if
(
typeof
curve
!=
'
undefined
'
){
Traj
.
View
.
dyn_ctx
.
lineWidth
=
5
;
Traj
.
View
.
dyn_ctx
.
fillStyle
=
curve
.
color
;
Traj
.
View
.
dyn_ctx
.
strokeStyle
=
curve
.
color
;
Traj
.
View
.
dyn_ctx
.
globalAlpha
=
Traj
.
View
.
CURVE_ACTIVE_ALPHA
;
Traj
.
View
.
traj_ctx
.
lineWidth
=
Traj
.
View
.
CURVE_ACTIVE_STROKE_SIZE
*
2.5
;
Traj
.
View
.
traj_ctx
.
strokeStyle
=
curve
.
color
;
this
.
playCurve
(
curveIdx
);
}
},
stopCurrentCurve
:
function
()
{
stopPlayActions
:
function
()
{
if
(
this
.
isPlaying
)
{
if
(
this
.
requestId
)
{
cancelAnimationFrame
(
this
.
requestId
);
this
.
requestId
=
undefined
;
}
Traj
.
View
.
dyn_repaint
();
//
Traj.View.dyn_repaint();
Traj
.
Player
.
isPlaying
=
false
;
Traj
.
OSC
.
sendPlay
(
"
end
"
);
var
playButton
=
document
.
getElementById
(
'
playButton
'
);
var
multiplayButton
=
document
.
getElementById
(
'
multiplayButton
'
);
playButton
.
innerHTML
=
'
Play
'
;
multiplayButton
.
innerHTML
=
'
Multi
'
;
}
},
repaintPoint
:
function
(
curve
,
point
)
{
var
dyn_ctx
=
Traj
.
View
.
dyn_ctx
;
dyn_ctx
.
strokeStyle
=
curve
.
color
;
dyn_ctx
.
lineWidth
=
5
;
if
(
point
)
{
var
pos
=
Traj
.
Utils
.
convertUnitsIntoCanvasPos
(
point
);
//draw large point
Traj
.
View
.
drawPoint
(
dyn_ctx
,
pos
,
8
);
Traj
.
View
.
drawPoint
(
dyn_ctx
,
pos
,
18
);
}
},
repaintPointWithOrientation
:
function
(
curve
,
point
,
orientation
)
{
var
dyn_ctx
=
Traj
.
View
.
dyn_ctx
;
dyn_ctx
.
strokeStyle
=
curve
.
color
;
if
(
point
&&
orientation
)
{
var
pos
=
Traj
.
Utils
.
convertUnitsIntoCanvasPos
(
point
);
Traj
.
View
.
drawOrientationForPoint
(
dyn_ctx
,
point
,
orientation
);
//draw large point
var
pos
=
Traj
.
Utils
.
convertUnitsIntoCanvasPos
(
point
);
Traj
.
View
.
drawPoint
(
dyn_ctx
,
pos
,
18
);
}
},
repaintCurve
:
function
(
curve
,
index
,
lastIndex
)
{
var
dyn_ctx
=
Traj
.
View
.
dyn_ctx
,
pos
,
last_pos
;
pos
,
last_pos
;
dyn_ctx
.
lineWidth
=
Traj
.
View
.
CURVE_ACTIVE_STROKE_SIZE
*
1.3
;
dyn_ctx
.
strokeStyle
=
curve
.
color
;
...
...
@@ -434,8 +142,14 @@ Traj.Player = {
////////////////////////////////////
updateLoopMode
:
function
(){
Traj
.
Player
.
loopMode
=
document
.
getElementById
(
"
flip-loop
"
).
value
==
'
on
'
;
Traj
.
Player
.
loopMode
=
document
.
getElementById
(
"
flip-loop
"
).
value
==
=
'
on
'
;
},
updatePlayMode
:
function
(){
Traj
.
Player
.
isMulti
=
document
.
getElementById
(
"
flip-PlayMode
"
).
value
===
'
on
'
;
Traj
.
View
.
repaintAll
();
},
}
...
...
WOB/server/interfaces/js/TimedCurve.js
View file @
7575e5bc
...
...
@@ -193,7 +193,7 @@ TimedCurve.prototype.cloneNoPoints = function() {
return
clone
;
}
TimedCurve
.
prototype
.
lengthTime
=
function
()
{
TimedCurve
.
prototype
.
getDuration
=
function
()
{
var
lengt
=
this
.
X
.
length
-
1
;
var
time
=
this
.
t
[
lengt
];
return
time
;
...
...
WOB/server/interfaces/js/Utils.js
View file @
7575e5bc
...
...
@@ -9,7 +9,7 @@ Traj.Utils = {
golden_ratio_conjugate
:
0.618033988749895
,
//events utilities
//events utilities
for touch/mouse events
getStartEventName
:
function
(){
return
Traj
.
onmobile
?
'
touchstart
'
:
'
mousedown
'
;
},
...
...
@@ -187,6 +187,7 @@ Traj.Utils = {
}
},
//returns an array with [x,y,z,t,[alpha,beta,gamma]]
interpolate
:
function
(
now
,
curve
,
idx
)
{
if
(
typeof
(
idx
)
==
"
undefined
"
){
var
idx
=
Traj
.
Utils
.
findPointIdx
(
now
,
curve
);
...
...
WOB/server/interfaces/js/View.js
View file @
7575e5bc
...
...
@@ -44,8 +44,8 @@ Traj.View = {
FIRST_POINT_SIZE
:
5
,
//pix
CURVE_STROKE_SIZE
:
2
,
CURVE_ACTIVE_STROKE_SIZE
:
4
,
CURVE_ALPHA
:
0.
4
,
CURVE_ACTIVE_STROKE_SIZE
:
3
,
CURVE_ALPHA
:
0.
35
,
CURVE_ACTIVE_ALPHA
:
0.9
,
//Events variables...
...
...
@@ -123,7 +123,7 @@ Traj.View = {
ctx
.
stroke
();
},
drawCurve
:
function
(
ctx
,
curve
,
index
,
linewidth
,
alpha
,
withPoint
)
{
drawCurve
:
function
(
ctx
,
curve
,
index
,
linewidth
,
alpha
,
withPoint
)
{
ctx
.
lineWidth
=
linewidth
;
ctx
.
fillStyle
=
curve
.
color
;
ctx
.
strokeStyle
=
curve
.
color
;
...
...
@@ -146,7 +146,7 @@ Traj.View = {
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.
9
));
this
.
drawPoint
(
ctx
,
pos
,
(
linewidth
*
0.
5
));
}
}
ctx
.
globalAlpha
=
1
;
...
...
@@ -155,18 +155,17 @@ Traj.View = {
speaker_image
:
new
Image
(),
speaker_image_width
:
26
,
//draw the points of the curve that have an orientation defined.