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
ff492b9c
Commit
ff492b9c
authored
Dec 02, 2015
by
Jérémie Garcia
Browse files
update with orientation ongoing
parent
cde2e341
Changes
13
Expand all
Hide whitespace changes
Inline
Side-by-side
WOB/server/interfaces/Trajectoires.html
View file @
ff492b9c
...
...
@@ -44,19 +44,12 @@
<h1>
Settings
</h1>
<label>
Undo:
</label>
<div>
<a
onClick=
"javascript:Traj.State.undo();"
data-role=
"button"
data-theme=
"a"
data-icon=
"back"
data-inline=
"true"
></a>
</div>
<label>
Speakers Pos:
</label>
<input
type=
"number"
id=
"speaker_dist"
name=
"distHP"
value=
"1"
onchange=
"javascript:Traj.View.updateHpDistance()"
data-inline=
"true"
/>
<label>
Speakers Pos:
</label>
<input
type=
"number"
id=
"speaker_dist"
name=
"distHP"
value=
"1"
data-mini=
"true"
onchange=
"javascript:Traj.View.updateHpDistance()"
data-inline=
"true"
/>
<form>
<label
for=
"flip-curvesinback"
>
Draw Curves in Background:
</label>
<select
name=
"flip-curvesinback"
id=
"flip-curvesinback"
data-role=
"slider"
data-theme=
"b"
onchange=
"javascript:Traj.View.updateDrawCurvesInBackground()"
>
<select
name=
"flip-curvesinback"
id=
"flip-curvesinback"
data-role=
"slider"
data-theme=
"b"
data-mini=
"true"
onchange=
"javascript:Traj.View.updateDrawCurvesInBackground()"
>
<option
value=
"off"
>
No
</option>
<option
value=
"on"
selected=
"selected"
>
Yes
</option>
</select>
...
...
@@ -64,14 +57,7 @@
<form>
<label
for=
"flip-loop"
>
Loop Mode:
</label>
<select
name=
"flip-loop"
id=
"flip-loop"
data-role=
"slider"
data-theme=
"b"
onchange=
"javascript:Traj.Player.updateLoopMode()"
>
<option
value=
"off"
selected=
"selected"
>
Off
</option>
<option
value=
"on"
>
On
</option>
</select>
</form>
<form>
<label
for=
"flip-orientation"
>
Stream Orientation:
</label>
<select
name=
"flip-orientation"
id=
"flip-orientation"
data-role=
"slider"
data-theme=
"b"
onchange=
"javascript:Traj.Events.updateOrientationMode()"
>
<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>
...
...
@@ -79,7 +65,7 @@
<form>
<label
for=
"flip-timeSlider"
>
Show Time Slider:
</label>
<select
name=
"flip-timeSlider"
id=
"flip-timeSlider"
data-role=
"slider"
data-theme=
"b"
onchange=
"javascript:Traj.Events.updateTimeSliderMode()"
>
<select
name=
"flip-timeSlider"
id=
"flip-timeSlider"
data-role=
"slider"
data-theme=
"b"
data-mini=
"true"
onchange=
"javascript:Traj.Events.updateTimeSliderMode()"
>
<option
value=
"off"
>
Off
</option>
<option
value=
"on"
selected=
"selected"
>
On
</option>
</select>
...
...
@@ -87,7 +73,7 @@
<form>
<label
for=
"flip-zSlider"
>
Show Z Slider:
</label>
<select
name=
"flip-zSlider"
id=
"flip-zSlider"
data-role=
"slider"
data-theme=
"b"
onchange=
"javascript:Traj.View.updateZSliderMode()"
>
<select
name=
"flip-zSlider"
id=
"flip-zSlider"
data-role=
"slider"
data-theme=
"b"
data-mini=
"true"
onchange=
"javascript:Traj.View.updateZSliderMode()"
>
<option
value=
"off"
selected=
"selected"
>
Off
</option>
<option
value=
"on"
>
On
</option>
</select>
...
...
@@ -130,6 +116,10 @@
<div
style=
"margin-top: 40px"
unselectable=
"on"
class=
"unselectable"
>
Hold to draw a new curve
</div>
</div>
<div
id=
'feedbackDisplay'
data-role=
"none"
>
<div
style=
"margin-top: 40px"
unselectable=
"on"
class=
"unselectable"
>
</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.7);"
>
-
</a>
...
...
@@ -161,19 +151,25 @@
<input
type=
"hidden"
class=
"timeSlider"
value=
"0"
/>
</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-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
id=
footer
data-role=
"footer"
>
<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-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=
"center"
id=
"orientation"
>
<input
type=
"button"
value=
"On"
id=
"onoff"
onclick=
"onoff();"
>
</div>
</div>
<div
id=
footer
data-role=
"footer"
>
<div
class=
"right"
id=
"options-div"
>
<a
href=
"#"
onClick=
"javascript:Traj.Session.exportCurrentCurve();"
data-mini=
"true"
data-role=
"button"
>
Export
</a>
<a
href=
"#"
onClick=
"javascript:Traj.Events.OrientationRecording();"
data-inline=
"true"
data-mini=
"true"
data-role=
"button"
id=
"OrientationButton"
data-theme=
'c'
>
Set Orientation
</a>
<a
href=
"#"
onClick=
"javascript:Traj.Session.exportCurrentCurve();"
data-inline=
"true"
data-mini=
"true"
data-role=
"button"
>
Send
</a>
</div>
</div>
<!-- /footer -->
...
...
WOB/server/interfaces/css/index.css
View file @
ff492b9c
...
...
@@ -93,7 +93,6 @@ body {
opacity
:
0.7
;
}
/* NEW */
.sourceButton
{
margin
:
-3px
;
padding
:
0
;
...
...
@@ -147,6 +146,7 @@ body {
position
:
absolute
;
width
:
100%
;
bottom
:
0
;
height
:
40px
;
}
.right
{
...
...
@@ -166,8 +166,8 @@ body {
.left
{
position
:
absolute
;
left
:
0
;
opacity
:
0.8
;
z-index
:
5
;
margin
:
0px
;
}
a
.curveMenuButton
{
...
...
@@ -211,9 +211,7 @@ a.curveMenuButton {
}
#sessionDiv
{
position
:
absolute
;
left
:
0px
;
bottom
:
0
;
z-index
:
4
;
}
...
...
@@ -240,10 +238,6 @@ a.curveMenuButton {
padding-top
:
5px
;
}
#footer
{
height
:
40px
;
}
#spaceStretchDiv
>
input
{
width
:
50px
;
...
...
@@ -277,6 +271,18 @@ a.curveMenuButton {
text-align
:
center
;
}
#feedbackDisplay
{
position
:
absolute
;
background-color
:
rgba
(
250
,
250
,
250
,
0.6
);
top
:
50px
;
left
:
5px
;
width
:
120px
;
height
:
20px
;
z-index
:
4
;
font-size
:
20px
;
text-align
:
left
;
}
#contextMenu
{
position
:
absolute
;
height
:
30px
;
...
...
WOB/server/interfaces/css/speaker_icon.png
0 → 100644
View file @
ff492b9c
2.12 KB
WOB/server/interfaces/js/OSC.js
View file @
ff492b9c
...
...
@@ -116,7 +116,7 @@ Traj.OSC = {
sendOrientation
:
function
(
msg
){
Traj
.
OSC
.
sendSpatMessage
([
'
source
'
,
Traj
.
Manager
.
currentSource
,
'
yaw
'
,
msg
[
0
]]);
//Traj.OSC.sendSpatMessage(['source', Traj.Manager.currentSource, 'pitch', msg[1]]);
//
Traj.OSC.sendSpatMessage(['source', Traj.Manager.currentSource, 'roll', msg[2]]);
//Traj.OSC.sendSpatMessage(['source', Traj.Manager.currentSource, 'roll', msg[2]]);
},
sendNewTraj
:
function
(
msg
){
...
...
WOB/server/interfaces/js/Player.js
View file @
ff492b9c
...
...
@@ -24,21 +24,22 @@ Traj.Player = {
yOld
=
curve
.
Y
[
0
],
z
=
curve
.
Z
[
0
],
counter
=
0
,
idx
=
0
,
idxOld
=
0
;
idx
=
0
;
Traj
.
OSC
.
sendPlay
(
"
start
"
);
var
begin
=
new
Date
().
getTime
();
var
timeSliderPosition
=
Traj
.
Events
.
getSliderValue
();
// check if the slider is not at the end (or mostly)
if
(
timeSliderPosition
<
lengthTime
-
100
)
{
// if it is not, change the begin time (if it is, leave it to restart at the begining)
// 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
[
1
];
yOld
=
pointCoord
[
2
];
xOld
=
pointCoord
[
0
];
yOld
=
pointCoord
[
1
];
(
function
loop
()
{
// get time for new frame
...
...
@@ -54,9 +55,9 @@ Traj.Player = {
// [sourceNumber, X, Y, Z, t]
pointCoord
=
Traj
.
Utils
.
interpolate
(
now
,
curve
,
idx
);
x
=
pointCoord
[
1
];
y
=
pointCoord
[
2
];
z
=
pointCoord
[
3
];
x
=
pointCoord
[
0
];
y
=
pointCoord
[
1
];
z
=
pointCoord
[
2
];
if
(
!
isNaN
(
x
)
&&!
isNaN
(
y
))
{
...
...
@@ -69,11 +70,8 @@ Traj.Player = {
// clear dyn canvas = large point
Traj
.
View
.
dyn_repaint
();
Traj
.
Player
.
repaintPoint
(
curve
,[
x
,
y
]);
// paint point
xOld
=
x
;
yOld
=
y
;
Traj
.
Player
.
repaintCurve
(
curve
,
idx
,
idxOld
);
// paint large curve
idxOld
=
idx
;
Traj
.
Player
.
repaintCurve
(
curve
,
idx
,
idx
-
1
);
// paint large curve
Traj
.
Events
.
setZSliderValue
(
z
);
}
...
...
@@ -127,8 +125,7 @@ Traj.Player = {
idxOld
=
0
;
curveArray
[
k
]
=
curve
;
lengthTimeArray
[
k
]
=
lengthTime
;
pointCoordArray
[
k
]
=
pointCoord
;
pointCoordArray
[
k
]
=
pointCoord
;
xArray
[
k
]
=
x
;
yArray
[
k
]
=
y
;
xOldArray
[
k
]
=
xOld
;
...
...
@@ -139,26 +136,26 @@ Traj.Player = {
}
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
(
indexes
);
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
][
1
];
yOldArray
[
k
]
=
pointCoordArray
[
k
][
2
];
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
var
timeSliderPosition
=
Traj
.
Events
.
getSliderValue
();
if
(
timeSliderPosition
<
lengthTime
-
100
)
{
begin
-=
timeSliderPosition
;
}
Traj
.
OSC
.
sendPlay
(
"
start
"
);
(
function
loopMulti
()
{
// get time for new frame
now
=
new
Date
().
getTime
()
-
begin
;
...
...
@@ -174,8 +171,8 @@ Traj.Player = {
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
][
1
];
yArray
[
k
]
=
pointCoordArray
[
k
][
2
];
xArray
[
k
]
=
pointCoordArray
[
k
][
0
];
yArray
[
k
]
=
pointCoordArray
[
k
][
1
];
if
(
!
isNaN
(
xArray
[
k
])
&&!
isNaN
(
yArray
[
k
]))
{
//if (counter == 1) {
...
...
@@ -282,8 +279,8 @@ Traj.Player = {
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
][
1
];
yOldArray
[
k
]
=
pointCoordArray
[
k
][
2
];
xOldArray
[
k
]
=
pointCoordArray
[
k
][
0
];
yOldArray
[
k
]
=
pointCoordArray
[
k
][
1
];
}
(
function
loopMulti
()
{
...
...
@@ -301,8 +298,8 @@ Traj.Player = {
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
][
1
];
yArray
[
k
]
=
pointCoordArray
[
k
][
2
];
xArray
[
k
]
=
pointCoordArray
[
k
][
0
];
yArray
[
k
]
=
pointCoordArray
[
k
][
1
];
if
(
!
isNaN
(
xArray
[
k
])
&&!
isNaN
(
yArray
[
k
]))
{
//if (counter == 1) {
...
...
WOB/server/interfaces/js/TimedCurve.js
View file @
ff492b9c
...
...
@@ -8,6 +8,7 @@ function TimedCurve(source) {
this
.
Y
=
[];
this
.
Z
=
[];
this
.
t
=
[];
this
.
orientation
=
[];
this
.
color
=
Traj
.
Utils
.
getColorSource
(
source
)
||
Traj
.
Utils
.
getColorSource
(
1
);
this
.
sourceNumber
=
source
||
Number
(
1
);
}
...
...
@@ -22,7 +23,14 @@ TimedCurve.prototype.addTimedPoint = function (x, y, z, t) {
this
.
X
.
push
(
x
);
this
.
Y
.
push
(
y
);
this
.
Z
.
push
(
z
);
this
.
t
.
push
(
Math
.
floor
(
t
));
this
.
t
.
push
(
Math
.
floor
(
t
))
this
.
orientation
.
push
([
270
,
0
,
0
]);
}
// write points into currentCurve object
TimedCurve
.
prototype
.
setOrientationAtIndex
=
function
(
orientation
,
idx
)
{
this
.
orientation
[
idx
]
=
orientation
;
}
TimedCurve
.
prototype
.
spaceScale
=
function
(
factor
)
{
...
...
@@ -33,7 +41,7 @@ TimedCurve.prototype.spaceScale = function (factor) {
}
}
TimedCurve
.
prototype
.
s
a
pceScaleAxis
=
function
(
factor
,
vectorAxis
,
pointAxis
)
{
TimedCurve
.
prototype
.
sp
a
ceScaleAxis
=
function
(
factor
,
vectorAxis
,
pointAxis
)
{
var
point
=
[],
distance
=
0
,
dirVector
=
[],
...
...
@@ -48,7 +56,7 @@ TimedCurve.prototype.sapceScaleAxis = function(factor,vectorAxis,pointAxis) {
}
}
TimedCurve
.
prototype
.
s
a
pceScaleAxisRange
=
function
(
factor
,
vectorAxis
,
pointAxis
,
pointsLine
)
{
TimedCurve
.
prototype
.
sp
a
ceScaleAxisRange
=
function
(
factor
,
vectorAxis
,
pointAxis
,
pointsLine
)
{
var
point
=
[],
distance
=
0
,
dirVector
=
[],
...
...
@@ -136,6 +144,7 @@ TimedCurve.prototype.translate = function(x,y,z) {
}
}
//TODO: change or not the orientation?
TimedCurve
.
prototype
.
rotate
=
function
(
center
,
angle
)
{
var
newXY
,
X
,
...
...
@@ -190,3 +199,17 @@ TimedCurve.prototype.getDistanceToPoint = function(pos) {
}
return
distance
;
}
TimedCurve
.
prototype
.
getClosestPointIndex
=
function
(
pos
)
{
var
distance
=
Infinity
,
tmp
,
idx
=
0
;
for
(
var
k
=
0
;
k
<
this
.
X
.
length
;
k
++
)
{
tmp
=
Traj
.
Utils
.
distanceBtwPoints
([
this
.
X
[
k
],
this
.
Y
[
k
]],
pos
);
if
(
tmp
<
distance
)
{
distance
=
tmp
;
idx
=
k
;
}
}
return
idx
;
}
WOB/server/interfaces/js/Utils.js
View file @
ff492b9c
...
...
@@ -136,7 +136,7 @@ Traj.Utils = {
simplifyCurve
:
function
(
curve
,
tolerance
)
{
var
points
=
[],
pt
=
{};
pt
=
{};
for
(
var
k
=
0
;
k
<
curve
.
X
.
length
;
k
++
)
{
var
pt
=
{};
...
...
@@ -157,25 +157,25 @@ Traj.Utils = {
return
newCurve
;
},
findPointsIdx
:
function
(
maxTime
,
lastPoint
,
curve
)
{
var
timeSearch
=
curve
.
t
[
lastPoint
],
pointIdx
=
lastPoint
,
pointsIdx
=
[];
findPointsIdx
:
function
(
maxTime
,
idx
,
curve
)
{
var
timeSearch
=
curve
.
t
[
idx
],
pointIdx
=
idx
,
pointsIdx
=
[];
while
(
timeSearch
<
maxTime
)
{
pointIdx
=
pointIdx
+
1
;
timeSearch
=
curve
.
t
[
pointIdx
];
}
var
nbPoints
=
pointIdx
-
1
-
lastPoint
;
var
nbPoints
=
pointIdx
-
1
-
idx
;
var
points
=
0
;
for
(
points
=
1
;
points
<
nbPoints
+
1
;
points
++
){
pointsIdx
.
push
(
lastPoint
+
points
);
pointsIdx
.
push
(
idx
+
points
);
}
return
pointsIdx
;
},
findPointIdx
:
function
(
time
,
curve
)
{
var
timeSearch
=
0
,
pointIdx
=
0
;
pointIdx
=
0
;
while
(
timeSearch
<=
time
)
{
pointIdx
=
pointIdx
+
1
;
timeSearch
=
curve
.
t
[
pointIdx
];
...
...
@@ -187,44 +187,43 @@ Traj.Utils = {
}
},
interpolate
:
function
(
now
,
curve
,
lastPoint
)
{
if
(
typeof
(
lastPoint
)
==
'
undefined
'
)
{
var
lastPoint
=
Traj
.
Utils
.
findPointIdx
(
now
,
curve
);
interpolate
:
function
(
now
,
curve
,
idx
)
{
if
(
typeof
(
idx
)
==
"
undefined
"
){
var
idx
=
Traj
.
Utils
.
findPointIdx
(
now
,
curve
);
}
var
lastTime
=
curve
.
t
[
idx
],
nextTime
=
0
,
x
,
y
,
z
;
if
(
curve
.
t
[
idx
+
1
]
!==
undefined
)
{
nextTime
=
curve
.
t
[
idx
+
1
]
var
diffTime
=
nextTime
-
lastTime
;
x
=
curve
.
X
[
idx
]
*
(
nextTime
-
now
)
/
diffTime
+
curve
.
X
[
idx
+
1
]
*
(
now
-
lastTime
)
/
diffTime
;
y
=
curve
.
Y
[
idx
]
*
(
nextTime
-
now
)
/
diffTime
+
curve
.
Y
[
idx
+
1
]
*
(
now
-
lastTime
)
/
diffTime
;
z
=
curve
.
Z
[
idx
]
*
(
nextTime
-
now
)
/
diffTime
+
curve
.
Z
[
idx
+
1
]
*
(
now
-
lastTime
)
/
diffTime
;
}
else
{
x
=
curve
.
X
[
idx
];
y
=
curve
.
Y
[
idx
];
z
=
curve
.
Z
[
idx
];
}
var
lastTime
=
curve
.
t
[
lastPoint
],
nextTime
=
0
;
if
(
curve
.
t
[
lastPoint
+
1
]
!==
undefined
)
{
nextTime
=
curve
.
t
[
lastPoint
+
1
]
var
diffTime
=
nextTime
-
lastTime
;
var
x
=
curve
.
X
[
lastPoint
]
*
(
nextTime
-
now
)
/
diffTime
+
curve
.
X
[
lastPoint
+
1
]
*
(
now
-
lastTime
)
/
diffTime
;
var
y
=
curve
.
Y
[
lastPoint
]
*
(
nextTime
-
now
)
/
diffTime
+
curve
.
Y
[
lastPoint
+
1
]
*
(
now
-
lastTime
)
/
diffTime
;
var
z
=
curve
.
Z
[
lastPoint
]
*
(
nextTime
-
now
)
/
diffTime
+
curve
.
Z
[
lastPoint
+
1
]
*
(
now
-
lastTime
)
/
diffTime
;
}
else
{
var
x
=
curve
.
X
[
lastPoint
];
var
y
=
curve
.
Y
[
lastPoint
];
var
z
=
curve
.
Z
[
lastPoint
];
}
var
pointCoord
=
[];
pointCoord
.
push
(
curve
.
sourceNumber
);
pointCoord
.
push
(
x
);
pointCoord
.
push
(
y
);
pointCoord
.
push
(
z
);
pointCoord
.
push
(
now
);
var
pointCoord
=
[];
pointCoord
.
push
(
x
);
pointCoord
.
push
(
y
);
pointCoord
.
push
(
z
);
pointCoord
.
push
(
now
);
return
pointCoord
;
return
pointCoord
;
},
rotate
:
function
(
cx
,
cy
,
x
,
y
,
angle
)
{
var
radians
=
(
Math
.
PI
/
180
)
*
angle
,
cos
=
Math
.
cos
(
radians
),
sin
=
Math
.
sin
(
radians
),
nx
=
(
cos
*
(
x
-
cx
))
-
(
sin
*
(
y
-
cy
))
+
cx
,
ny
=
(
sin
*
(
x
-
cx
))
+
(
cos
*
(
y
-
cy
))
+
cy
;
cos
=
Math
.
cos
(
radians
),
sin
=
Math
.
sin
(
radians
),
nx
=
(
cos
*
(
x
-
cx
))
-
(
sin
*
(
y
-
cy
))
+
cx
,
ny
=
(
sin
*
(
x
-
cx
))
+
(
cos
*
(
y
-
cy
))
+
cy
;
return
[
nx
,
ny
];
},
sign
:
function
(
x
)
{
return
x
/
Math
.
abs
(
x
);
},
...
...
WOB/server/interfaces/js/View.js
View file @
ff492b9c
...
...
@@ -40,14 +40,6 @@ Traj.View = {
col
=
Traj
.
Utils
.
HSVtoRGB
(
h
,
0.95
,
0.68
);
this
.
default_colors
[
i
]
=
Traj
.
Utils
.
rgbToHex
(
col
);
}
/*
for(var i = 0; i< Traj.Manager.NB_SOURCES;i++){
var h = (this.start_hue + i*(1/(1+ Traj.Manager.NB_SOURCES)))%1,
col = Traj.Utils.HSVtoRGB(h, 0.95, 0.68);
this.default_colors[i] = Traj.Utils.rgbToHex(col);
}
*/
},
FIRST_POINT_SIZE
:
5
,
//pix
...
...
@@ -97,6 +89,13 @@ Traj.View = {
this
.
dyn_ctx
=
initializeCanvasContext
(
this
.
dyn_canvas
,
canvas_width
,
canvas_height
);
this
.
current_ctx
=
initializeCanvasContext
(
this
.
current_canvas
,
canvas_width
,
canvas_height
);
//loads the speaker image as a sprite
this
.
speaker_image
.
onload
=
function
()
{
Traj
.
View
.
current_repaint
();
};
this
.
speaker_image
.
src
=
'
css/speaker_icon.png
'
;
this
.
minWH
=
Math
.
min
(
this
.
dyn_canvas
.
width
,
this
.
dyn_canvas
.
height
);
this
.
pixToValue
=
this
.
scaleFactor
/
this
.
minWH
;
...
...
@@ -153,6 +152,22 @@ Traj.View = {
ctx
.
globalAlpha
=
1
;
},
speaker_image
:
new
Image
(),
drawOrientationForCurve
:
function
(
ctx
,
curve
,
index
,
linewidth
,
alpha
,
withPoint
)
{
var
width
=
26
;
for
(
var
i
=
0
;
i
<
curve
.
orientation
.
length
;
i
++
)
{
var
orientation
=
curve
.
orientation
[
i
],
alpha
=
orientation
[
0
]
*
Math
.
PI
/
180
,
pos
=
Traj
.
Utils
.
convertUnitsIntoCanvasPos
([
curve
.
X
[
i
],
curve
.
Y
[
i
]]);
ctx
.
save
();
ctx
.
translate
(
pos
[
0
]
-
width
/
2
,
pos
[
1
]
-
width
/
2
);
ctx
.
rotate
(
alpha
);
ctx
.
drawImage
(
this
.
speaker_image
,
0
,
0
,
width
,
width
);
ctx
.
restore
();
};
},
//////////////////////////////////
//////// BACKGROUND DRAWING///////
//////////////////////////////////
...
...
@@ -209,6 +224,55 @@ Traj.View = {
this
.
bg_ctx
.
font
=
'
10px Georgia
'
;
var
pos
=
Traj
.
Utils
.
convertUnitsIntoCanvasPos
([
1
,
0
]);
this
.
bg_ctx
.
fillText
(
1
,
pos
[
0
],
pos
[
1
]);
pos
=
Traj
.
Utils
.
convertUnitsIntoCanvasPos
([
-
1
,
0
]);
this
.
bg_ctx
.
fillText
(
-
1
,
pos
[
0
],
pos
[
1
]);
pos
=
Traj
.
Utils
.
convertUnitsIntoCanvasPos
([
0
,
1
]);
this
.
bg_ctx
.
fillText
(
1
,
pos
[
0
],
pos
[
1
]);
pos
=
Traj
.
Utils
.
convertUnitsIntoCanvasPos
([
0
,
-
1
]);
this
.
bg_ctx
.
fillText
(
-
1
,
pos
[
0
],
pos
[
1
]);
},
//draw the axis
drawCircularGrid
:
function
()
{
this
.
bg_ctx
.
globalAlpha
=
0.6
;
this
.
bg_ctx
.
beginPath
();
this
.
bg_ctx
.
strokeStyle
=
this
.
COLOR_SCALE
;
this
.
bg_ctx
.
lineWidth
=
1.2
;
var
radius
=
1
;
//in Traj Units
var
radius_pix
=
radius
*
(
1
/
this
.
pixToValue
);
var
center_x
=
Math
.
floor
(
this
.
traj_canvas
.
width
/
2
);
var
center_y
=
Math
.
floor
(
this
.
traj_canvas
.
height
/
2
);
var
max_radius_pix
=
(
center_x
<
center_y
)?
center_y
:
center_x
;
//draw from center with a step
for
(
var
radius
=
radius_pix
;
(
radius
<=
max_radius_pix
)
&&
(
radius
<
5
*
radius_pix
);
radius
+=
radius_pix
)
{
this
.
bg_ctx
.
arc
(
center_x
,
center_y
,
radius
,
0
,
2
*
Math
.
PI
,
false
);
}
this
.
bg_ctx
.
stroke
();
//draw the axis
this
.
bg_ctx
.
globalAlpha
=
1
;
this
.
bg_ctx
.
beginPath
();
this
.
bg_ctx
.
strokeStyle
=
this
.
COLOR_SCALE
;
this
.
bg_ctx
.
lineWidth
=
1
;
this
.
bg_ctx
.
moveTo
(
Math
.
floor
(
this
.
traj_canvas
.
width
/
2
),
0
);
this
.
bg_ctx
.
lineTo
(
Math
.
floor
(
this
.
traj_canvas
.
width
/
2
),
this
.
traj_canvas
.
height
);
this
.
bg_ctx
.
moveTo
(
0
,
Math
.
floor
(
this
.
traj_canvas
.
height
/
2
));
this
.
bg_ctx
.
lineTo
(
this
.
traj_canvas
.
width
,
Math
.
floor
(
this
.
traj_canvas
.
height
/
2
));
this
.
bg_ctx
.
stroke
();
//draw labels for 1 units
this
.
bg_ctx
.
fillStyle
=
'
black
'
;
this
.
bg_ctx
.
font
=
'
10px Georgia
'
;