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
matefun
Frontend
Commits
68c4fc59
Commit
68c4fc59
authored
Aug 11, 2018
by
Diego Rey
Browse files
Added Animation handler for 2D component
parent
8d0e0376
Changes
4
Hide whitespace changes
Inline
Side-by-side
Frontend Angular 4/package-lock.json
View file @
68c4fc59
...
...
@@ -4139,8 +4139,8 @@
"dev"
:
true
},
"function-plot"
:
{
"version"
:
"git
+https
://github.com/diego-rey/function-plot.git#
e81bedcbbdfe8cdd7c356a1bca4664ad7db5a371
"
,
"from"
:
"git
+https
://github.com/diego-rey/function-plot.git#feature/integration-domain-shape"
,
"version"
:
"git://github.com/diego-rey/function-plot.git#
d8b7147168ab7a595f8323d28ffc944735117606
"
,
"from"
:
"git://github.com/diego-rey/function-plot.git#feature/integration-domain-shape"
,
"requires"
:
{
"array-range"
:
"^1.0.1"
,
"built-in-math-eval"
:
"^0.3.0"
,
...
...
Frontend Angular 4/src/app/layout/plotter/graph2D/graph2D.component.html
View file @
68c4fc59
<div
class=
"card"
>
<div
class=
"card-block contenedor-canvas"
>
<button
ngbPopover=
"Zoom +"
triggers=
"mouseenter:mouseleave"
data-placement=
"bottom"
class=
"btn btn-sm btn-secondary"
style=
"float:right; margin-right: 165px; margin-top: -55px"
(click)=
zoomIn()
><i
class=
"fa fa-plus"
></i></button>
<button
ngbPopover=
"Zoom -"
data-placement=
"bottom"
triggers=
"mouseenter:mouseleave"
class=
"btn btn-sm btn-secondary"
style=
"float:right; margin-right: 132px; margin-top: -55px"
(click)=
zoomOut()
><i
class=
"fa fa-minus"
></i></button>
<button
ngbPopover=
"Zoom -"
triggers=
"mouseenter:mouseleave"
data-placement=
"bottom"
class=
"btn btn-sm btn-secondary"
style=
"float:right; margin-right: 132px; margin-top: -55px"
(click)=
zoomOut()
><i
class=
"fa fa-minus"
></i></button>
<button
class=
"btn btn-sm btn-secondary"
data-placement=
"bottom"
*ngIf=
"!animation.playing && animation.data.length>0"
style=
" float:left; margin-top: -5px; margin-right: 5px"
(click)=
"runAnimation()"
><i
class=
"fa fa-play"
></i></button>
<button
class=
"btn btn-sm btn-secondary"
data-placement=
"bottom"
*ngIf=
"animation.playing && animation.data.length>0"
style=
" float:left; margin-top: -5px; margin-right: 5px"
(click)=
"pauseAnimation()"
><i
class=
"fa fa-pause"
></i></button>
<ngb-progressbar
style=
"float: left; width: 90%"
*ngIf=
"animation.data.length>0"
type=
"info"
[value]=
"((animation.currentFrame+1)/animation.data.length)*100"
></ngb-progressbar>
<div
id=
"graph2D-container"
style=
"height: 100%; width: 100%;"
>
</div>
</div>
...
...
Frontend Angular 4/src/app/layout/plotter/graph2D/graph2D.component.ts
View file @
68c4fc59
import
{
Component
}
from
'
@angular/core
'
;
import
{
GHCIService
}
from
'
../../../shared/services/ghci.service
'
;
import
functionPlot
from
'
function-plot
'
;
import
{
Animation
}
from
'
./graph2D.helper
'
;
@
Component
({
moduleId
:
module
.
id
,
...
...
@@ -12,137 +13,184 @@ import functionPlot from 'function-plot';
})
export
class
Graph2DComponent
{
private
instance
:
{};
private
instance
:
null
;
private
animation
:
Animation
=
{
data
:
[],
timer
:
null
,
currentFrame
:
0
,
speed
:
1000
,
playing
:
false
,
init
:
false
};
public
constructor
(
private
ghciService
:
GHCIService
)
{
ghciService
.
messages
.
subscribe
(
canvas
=>
{
if
(
canvas
.
tipo
==
'
graph
'
)
{
var
jsonCanvas
=
JSON
.
parse
(
canvas
.
resultado
);
let
fun
=
eval
(
this
.
generarFuncion
(
jsonCanvas
));
var
conjs
=
this
.
obtenerConjunto
(
jsonCanvas
.
funs
[
0
]);
var
d
=
conjs
+
"
}
"
;
var
obj
=
JSON
.
parse
(
d
);
//Para las funciones
if
(
obj
.
conj
.
sets
.
fdom
==
"
function(x)
"
)
{
var
nom
=
jsonCanvas
.
funs
[
0
].
dom
;
var
elemento
=
this
.
recursionfuncion
(
jsonCanvas
.
funs
[
0
].
sets
,
nom
);
obj
.
conj
.
sets
.
fdom
=
function
(
x
)
{
return
eval
(
elemento
)
}
}
if
(
obj
.
conj
.
sets
.
fcod
==
"
function(x)
"
)
{
var
nom
=
jsonCanvas
.
funs
[
0
].
cod
;
var
elemento
=
this
.
recursionfuncion
(
jsonCanvas
.
funs
[
0
].
sets
,
nom
);
obj
.
conj
.
sets
.
fcod
=
function
(
x
)
{
return
(
eval
(
elemento
))
}
}
//para Enumerados
if
(
obj
.
conj
.
dom
==
'
Numer
'
)
{
var
cantElementos
=
obj
.
conj
.
sets
.
fdom
.
length
;
var
j
=
0
;
for
(
var
fun
of
obj
.
conj
.
sets
.
fdom
)
{
//var newstr = nuevo2.replace(fun, j);
j
=
j
+
1
;
switch
(
canvas
.
tipo
)
{
case
'
graph
'
:
{
var
jsonCanvas
=
JSON
.
parse
(
canvas
.
resultado
);
let
fun
=
eval
(
this
.
generarFuncion
(
jsonCanvas
));
var
conjs
=
this
.
obtenerConjunto
(
jsonCanvas
.
funs
[
0
]);
var
d
=
conjs
+
"
}
"
;
var
obj
=
JSON
.
parse
(
d
);
//Para las funciones
if
(
obj
.
conj
.
sets
.
fdom
==
"
function(x)
"
)
{
var
nom
=
jsonCanvas
.
funs
[
0
].
dom
;
var
elemento
=
this
.
recursionfuncion
(
jsonCanvas
.
funs
[
0
].
sets
,
nom
);
obj
.
conj
.
sets
.
fdom
=
function
(
x
)
{
return
eval
(
elemento
)
}
}
}
if
(
obj
.
conj
.
cod
==
'
Numer
'
)
{
var
cantElementos
=
obj
.
conj
.
sets
.
fcod
.
length
;
var
j
=
0
;
for
(
var
fun
of
obj
.
conj
.
sets
.
fcod
)
{
//var newstr = nuevo2.replace(fun, j);
j
=
j
+
1
;
if
(
obj
.
conj
.
sets
.
fcod
==
"
function(x)
"
)
{
var
nom
=
jsonCanvas
.
funs
[
0
].
cod
;
var
elemento
=
this
.
recursionfuncion
(
jsonCanvas
.
funs
[
0
].
sets
,
nom
);
obj
.
conj
.
sets
.
fcod
=
function
(
x
)
{
return
(
eval
(
elemento
))
}
}
//para Enumerados
if
(
obj
.
conj
.
dom
==
'
Numer
'
)
{
var
cantElementos
=
obj
.
conj
.
sets
.
fdom
.
length
;
var
j
=
0
;
for
(
var
fun
of
obj
.
conj
.
sets
.
fdom
)
{
//var newstr = nuevo2.replace(fun, j);
j
=
j
+
1
;
}
}
if
(
obj
.
conj
.
cod
==
'
Numer
'
)
{
var
cantElementos
=
obj
.
conj
.
sets
.
fcod
.
length
;
var
j
=
0
;
for
(
var
fun
of
obj
.
conj
.
sets
.
fcod
)
{
//var newstr = nuevo2.replace(fun, j);
j
=
j
+
1
;
}
}
var
colores
=
[
'
pink
'
,
'
red
'
,
'
blue
'
,
'
orange
'
,
'
green
'
]
var
num
=
this
.
getRandomArbitrary
(
0
,
4
);
var
color
=
colores
[
num
];
var
tipoGraf
;
if
(
obj
.
conj
.
baseDom
!=
'
R
'
){
tipoGraf
=
'
scatter
'
;
}
else
{
tipoGraf
=
'
polyline
'
;
}
this
.
instance
=
functionPlot
({
target
:
'
#graph2D-container
'
,
width
:
620
,
height
:
450
,
conj
:
obj
.
conj
,
data
:
[{
sampler
:
'
builtIn
'
,
fn
:
function
(
scope
)
{
return
fun
(
scope
.
x
)
},
graphType
:
tipoGraf
,
color
:
color
}],
plugins
:
[
functionPlot
.
plugins
.
zoomBox
()
]
})
break
;
}
var
colores
=
[
'
pink
'
,
'
red
'
,
'
blue
'
,
'
orange
'
,
'
green
'
]
var
num
=
this
.
getRandomArbitrary
(
0
,
4
);
var
color
=
colores
[
num
];
var
tipoGraf
;
if
(
obj
.
conj
.
baseDom
!=
'
R
'
){
tipoGraf
=
'
scatter
'
;
}
else
{
tipoGraf
=
'
polyline
'
;
case
'
canvas
'
:
{
console
.
log
(
'
TIPO
'
,
canvas
.
tipo
);
var
shapesData
=
JSON
.
parse
(
canvas
.
resultado
);
var
shapesDataNormalized
=
this
.
normalizeShapesData
(
shapesData
);
this
.
instance
=
functionPlot
({
target
:
'
#graph2D-container
'
,
width
:
800
,
height
:
700
,
xAxis
:
{
label
:
'
x - axis
'
,
scale
:
'
linear
'
,
domain
:
{
initial
:
[
-
10
,
10
],
type
:
'
discrete
'
}
},
data
:
shapesDataNormalized
,
plugins
:
[
functionPlot
.
plugins
.
zoomBox
()
]
})
break
;
}
this
.
instance
=
functionPlot
({
target
:
'
#graph2D-container
'
,
width
:
620
,
height
:
450
,
conj
:
obj
.
conj
,
data
:
[{
sampler
:
'
builtIn
'
,
fn
:
function
(
scope
)
{
return
fun
(
scope
.
x
)
},
graphType
:
tipoGraf
,
color
:
color
}],
plugins
:
[
functionPlot
.
plugins
.
zoomBox
()
]
})
// EXAMPLE - SHAPE
// this.instance = functionPlot({
// target: '#graph2D-container',
// width: 700,
// height: 700,
// xAxis: {
// label: 'x - axis',
// scale: 'linear',
// domain: {
// initial: [-10, 10],
// type: 'discrete'
// }
// },
// data: [{
// shape: {
// w : 6.0,
// h : 3.0,
// x : 0,
// y : 0,
// color :"red",
// rotation : 0.125
// },
// graphType: 'shape',
// shapeType: 'rect'
// }],
// plugins: [
// functionPlot.plugins.zoomBox()
// ]
// })
}
else
if
(
canvas
.
tipo
==
'
canvas
'
)
{
var
shapesData
=
JSON
.
parse
(
canvas
.
resultado
);
console
.
log
(
'
Shapes Data:
'
,
shapesData
);
var
shapesDataNormalized
=
this
.
normalizeShapesData
(
shapesData
);
console
.
log
(
'
Shapes Normalized
'
,
shapesDataNormalized
);
this
.
instance
=
functionPlot
({
target
:
'
#graph2D-container
'
,
width
:
800
,
height
:
700
,
xAxis
:
{
label
:
'
x - axis
'
,
scale
:
'
linear
'
,
domain
:
{
initial
:
[
-
10
,
10
],
type
:
'
discrete
'
case
'
animacion
'
:
{
console
.
log
(
'
TIPO
'
,
canvas
.
tipo
);
if
(
!
this
.
animation
.
init
)
{
this
.
animation
.
init
=
true
;
var
animationData
=
canvas
.
resultado
.
map
(
res
=>
JSON
.
parse
(
res
));
for
(
var
frame
of
animationData
)
{
this
.
animation
.
data
.
push
(
this
.
normalizeShapesData
(
frame
));
}
},
data
:
shapesDataNormalized
,
plugins
:
[
functionPlot
.
plugins
.
zoomBox
()
]
})
this
.
runAnimation
();
}
break
;
}
}
},
error
=>
{
}
)
}
/**
* @name updateFrame
* @desc update data for Function Plot and redraw the graph
*/
public
updateFrame
=
function
(
d
)
{
if
(
this
.
instance
)
{
this
.
instance
.
options
.
data
=
d
;
this
.
instance
.
draw
();
}
else
{
this
.
instance
=
functionPlot
({
target
:
'
#graph2D-container
'
,
width
:
800
,
height
:
700
,
xAxis
:
{
label
:
'
x - axis
'
,
scale
:
'
linear
'
,
domain
:
{
initial
:
[
-
10
,
10
],
type
:
'
discrete
'
}
},
data
:
d
,
plugins
:
[
functionPlot
.
plugins
.
zoomBox
()
]
})
}
}
/**
* @name runAnimation
* @desc Run Shapes Animation
*/
public
runAnimation
=
function
()
{
var
$this
=
this
;
if
(
$this
.
animation
.
timer
!==
null
)
return
;
$this
.
animation
.
timer
=
setInterval
(
function
(){
$this
.
updateFrame
(
$this
.
animation
.
data
[
$this
.
animation
.
currentFrame
]);
$this
.
animation
.
currentFrame
=
(
$this
.
animation
.
currentFrame
+
1
)
%
$this
.
animation
.
data
.
length
;
},
$this
.
animation
.
speed
);
$this
.
animation
.
playing
=
true
;
}
/**
* @name pauseAnimation
* @desc Pause Shapes Animation
*/
public
pauseAnimation
=
function
()
{
var
$this
=
this
;
clearInterval
(
$this
.
animation
.
timer
);
$this
.
animation
.
timer
=
null
;
$this
.
animation
.
playing
=
false
;
}
/**
...
...
@@ -253,8 +301,6 @@ export class Graph2DComponent {
return
normalized
;
}
getRandomArbitrary
=
function
(
min
,
max
)
{
return
Math
.
round
(
Math
.
random
()
*
(
max
-
min
)
+
min
);
}
...
...
Frontend Angular 4/src/app/layout/plotter/graph2D/graph2D.helper.ts
0 → 100644
View file @
68c4fc59
export
interface
Animation
{
data
?:
any
,
timer
?:
any
,
currentFrame
:
number
,
speed
:
number
,
playing
:
boolean
,
init
:
boolean
}
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment