Skip to content
GitLab
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
matefun
Frontend
Commits
90200d00
Commit
90200d00
authored
Sep 18, 2018
by
Diego Rey
Browse files
Fixed plotter 2D html, added speed control and fixed resposive grid
parent
e842aa8d
Changes
7
Hide whitespace changes
Inline
Side-by-side
Frontend Angular 4/src/app/layout/matefun/matefun.module.ts
View file @
90200d00
...
...
@@ -12,6 +12,8 @@ import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import
{
NotificacionModule
}
from
'
../../notificacion/notificacion.module
'
;
import
{
Graph2DModule
}
from
'
../plotter/graph2D/graph2D.module
'
;
import
{
Graph3DModule
}
from
'
../plotter/graph3D/graph3D.module
'
;
import
{
ClosePopoverOnOutsideClickDirective
}
from
'
../../shared/utils/closePopoverDirective
'
;
@
NgModule
({
imports
:
[
...
...
@@ -30,7 +32,12 @@ import { Graph3DModule } from '../plotter/graph3D/graph3D.module';
ConfirmComponent
,
SeleccionarDirectorioComp
],
declarations
:
[
MateFunComponent
,
ConfirmComponent
,
SeleccionarDirectorioComp
],
declarations
:
[
MateFunComponent
,
ConfirmComponent
,
SeleccionarDirectorioComp
,
ClosePopoverOnOutsideClickDirective
],
exports
:
[
MateFunComponent
]
})
...
...
Frontend Angular 4/src/app/layout/plotter/graph2D/graph2D.component.html
View file @
90200d00
<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 -"
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
ngbPopover=
"Centrar"
triggers=
"mouseenter:mouseleave"
data-placement=
"bottom"
class=
"btn btn-sm btn-secondary"
style=
" float:right; margin-right: 99px; margin-top: -55px"
(click)=
"recenterPlot()"
><i
class=
"fa fa-arrows"
></i></button>
<button
ngbPopover=
"Borrar"
triggers=
"mouseenter:mouseleave"
data-placement=
"bottom"
class=
"btn btn-sm btn-secondary"
style=
" float:right; margin-right: 66px; margin-top: -55px"
(click)=
"cleanPlot()"
><i
class=
"fa fa-trash"
></i></button>
<button
ngbPopover=
"Descargar PNG"
triggers=
"mouseenter:mouseleave"
data-placement=
"bottom"
class=
"btn btn-sm btn-secondary"
style=
"float:right; margin-right: 33px; margin-top: -55px"
(click)=
exportPlot()
><i
class=
"fa fa-download"
></i></button>
<a
id=
"download-plot"
class=
"download-plot"
href=
"#"
download=
"Plot.svg"
style=
"display: none"
>
Download Canvas
</a>
<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>
<button
[ngbPopover]=
popoverConfig
<!-- Buttons Controls -->
<div
class=
"buttons-control"
>
<button
ngbPopover=
"Zoom +"
class=
"btn btn-sm btn-secondary btn-zoom-increase"
data-placement=
"bottom"
triggers=
"mouseenter:mouseleave"
(click)=
zoomIn()
>
<i
class=
"fa fa-plus"
></i>
</button>
<button
ngbPopover=
"Zoom -"
class=
"btn btn-sm btn-secondary btn-zoom-decrease"
data-placement=
"bottom"
triggers=
"mouseenter:mouseleave"
(click)=
zoomOut()
>
<i
class=
"fa fa-minus"
></i>
</button>
<button
ngbPopover=
"Centrar"
class=
"btn btn-sm btn-secondary btn-zoom-center"
data-placement=
"bottom"
triggers=
"mouseenter:mouseleave"
(click)=
"recenterPlot()"
>
<i
class=
"fa fa-arrows"
></i>
</button>
<button
ngbPopover=
"Borrar"
class=
"btn btn-sm btn-secondary btn-trash"
data-placement=
"bottom"
triggers=
"mouseenter:mouseleave"
(click)=
"cleanPlot()"
>
<i
class=
"fa fa-trash"
></i>
</button>
<button
ngbPopover=
"Descargar PNG"
class=
"btn btn-sm btn-secondary btn-download"
data-placement=
"bottom"
triggers=
"mouseenter:mouseleave"
(click)=
exportPlot()
>
<i
class=
"fa fa-download"
></i>
</button>
<button
id=
"settings"
class=
"btn btn-sm btn-secondary btn-setting"
placement=
"bottom"
closePopoverOnOutsideClick
placement=
"bottom"
style=
" float:right; margin-right: 1px; margin-top: -55px"
tiggers=
"click"
class=
"btn btn-sm btn-secondary"
[ngbPopover]=
popoverCanvas
popoverTitle=
"Configuración"
>
<i
class=
"fa fa-gear"
></i>
</button>
<ng-template
#popoverConfig
>
<div
style=
"width: 140px;"
>
<label
class=
"d-block"
>
<input
type=
"checkbox"
[checked]=
animation.boton
(click)=
"multiGraf(value)"
>
Multi gráficas:
</label>
#popover
="
ngbPopover
"
tiggers=
"click"
>
<i
class=
"fa fa-gear"
></i>
</button>
</div>
<div
class=
"card"
>
<div
class=
"card-block contenedor-canvas"
>
<!-- Download Link -->
<a
id=
"download-plot"
class=
"download-plot"
href=
"#"
download=
"Plot.svg"
style=
"display: none"
>
Download Canvas
</a>
<div
style=
"display: flex;"
>
<span
style=
"margin-right: 8px; align-self: center;"
>
Zoom:
</span>
<input
type=
"number"
class=
"form-control form-control-sm"
[max]=
"10000"
[min]=
"2"
[(ngModel)]=
animation.zoo
(change)=
"setZoom()"
style=
"width: 70px;"
/>
<!-- Settings Popover Content -->
<ng-template
#popoverCanvas
>
<div
class=
"form-group settings-popover-content"
>
<div
class=
"chart-controls setting-section"
>
<label>
<input
type=
"checkbox"
name=
"settings.grid"
class=
"form-control form-control-sm"
[checked]=
settings.grid
(click)=
"toggleGrid()"
>
Grilla
</label>
<label>
<input
type=
"checkbox"
name=
"settings.axis"
class=
"form-control form-control-sm"
[checked]=
settings.axis
(click)=
"toggleAxis()"
>
Ejes
</label>
<label>
<input
type=
"checkbox"
name=
"settings.tip"
class=
"form-control form-control-sm"
[checked]=
settings.tip
(click)=
"toggleTip()"
>
Tip
</label>
</div>
<div
class=
"animation-controls setting-section"
[class.disabled]=
"animation.data.length === 0"
>
<label>
Velocidad de animación:
</label>
<label>
<button
class=
"btn btn-sm btn-secondary"
[attr.disabled]=
"animation.data.length === 0 ? '' : null"
(click)=
'decreaseSpeed()'
>
<i
class=
"fa fa-minus"
></i>
</button>
<button
class=
"btn btn-sm btn-secondary"
[attr.disabled]=
"animation.data.length === 0 ? '' : null"
(click)=
'restoreSpeed()'
>
<i
class=
"fa fa-undo"
></i>
</button>
<button
class=
"btn btn-sm btn-secondary"
[attr.disabled]=
"animation.data.length === 0 ? '' : null"
(click)=
'increaseSpeed()'
>
<i
class=
"fa fa-plus"
></i>
</button>
<span
class=
"speed-value"
>
1x
</span>
</label>
</div>
</div>
</ng-template>
<div
id=
"graph2D-container"
style=
"height: 100%; width: 100%;"
>
</ng-template>
<!-- Animation -->
<!-- <div class="animation" *ngIf="animation.data.length>0"> -->
<div
class=
"animation"
>
<button
class=
"btn btn-sm btn-secondary btn-play"
data-placement=
"bottom"
*ngIf=
"!animation.playing"
(click)=
"runAnimation()"
>
<i
class=
"fa fa-play"
></i>
</button>
<button
class=
"btn btn-sm btn-secondary btn-pause"
data-placement=
"bottom"
*ngIf=
"animation.playing"
(click)=
"pauseAnimation()"
>
<i
class=
"fa fa-pause"
></i>
</button>
<ngb-progressbar
class=
"progressbar"
type=
"info"
[value]=
"((animation.currentFrame+1)/animation.data.length)*100"
>
</ngb-progressbar>
</div>
<!-- Graph Container -->
<div
#graph2DContainer
id=
"graph2D-container"
>
</div>
</div>
</div>
\ No newline at end of file
Frontend Angular 4/src/app/layout/plotter/graph2D/graph2D.component.scss
0 → 100644
View file @
90200d00
// Buttons Control
.buttons-control
{
.btn-zoom-increase
,
.btn-zoom-decrease
,
.btn-zoom-center
,
.btn-trash
,
.btn-download
,
.btn-setting
{
float
:
right
;
margin-top
:
-34px
;
}
.btn-zoom-increase
{
margin-right
:
165px
;
}
.btn-zoom-decrease
{
margin-right
:
132px
;
}
.btn-zoom-center
{
margin-right
:
99px
;
}
.btn-trash
{
margin-right
:
66px
;
}
.btn-download
{
margin-right
:
33px
;
}
}
// Settings Popover
.settings-popover-content
{
width
:
12em
;
label
{
display
:
block
;
}
input
[
type
=
"checkbox"
]
{
width
:
15px
;
display
:
inline-block
;
}
.setting-section
{
margin-bottom
:
1em
;
}
.animation-controls
{
.speed-value
{
margin-left
:
0
.5em
;
font-weight
:
900
;
font-size
:
1
.2em
;
vertical-align
:
middle
;
}
&
.disabled
{
color
:
#ccc
;
i
.fa
{
color
:
#ccc
;
}
}
}
}
// Animation
.animation
{
.btn-play
,
.btn-pause
{
float
:left
;
margin-top
:
-5px
;
margin-right
:
5px
;
}
.progressbar
{
float
:
left
;
width
:
90%
;
}
}
#graph2D-container
{
height
:
100%
;
width
:
100%
;
}
Frontend Angular 4/src/app/layout/plotter/graph2D/graph2D.component.ts
View file @
90200d00
import
{
Component
}
from
'
@angular/core
'
;
import
{
Component
,
ViewChild
,
ElementRef
}
from
'
@angular/core
'
;
import
{
GHCIService
}
from
'
../../../shared/services/ghci.service
'
;
import
functionPlot
from
'
function-plot
'
;
import
{
Animation
,
toJSON
,
triggerDownload
}
from
'
./graph2D.helper
'
;
import
{
Animation
,
Setting
,
toJSON
,
triggerDownload
}
from
'
./graph2D.helper
'
;
@
Component
({
moduleId
:
module
.
id
,
selector
:
'
graph2D-component
'
,
templateUrl
:
'
./graph2D.component.html
'
,
styleUrls
:
[
'
./graph2D.component.scss
'
],
host
:
{
'
(window:resize)
'
:
'
onResize($event)
'
}
})
export
class
Graph2DComponent
{
// Ghci Service
private
ghciServiceSub
:
any
;
private
instance
:
null
;
// Chart Container - DOM Element
@
ViewChild
(
'
graph2DContainer
'
)
private
graph2DRef
:
ElementRef
;
// Chart Instance
private
instance
:
any
;
// Settings
settings
:
Setting
=
{
axis
:
true
,
grid
:
true
,
tip
:
true
}
private
funciones
=
[];
...
...
@@ -23,6 +37,7 @@ export class Graph2DComponent {
private
conjunto
=
[];
// Animation state
animation
:
Animation
=
{
data
:
[],
timer
:
null
,
...
...
@@ -146,11 +161,11 @@ export class Graph2DComponent {
color
:
color
});
}
let
bounding
=
this
.
getBounding
();
this
.
instance
=
functionPlot
({
target
:
'
#graph2D-container
'
,
width
:
620
,
height
:
450
,
width
:
bounding
.
width
,
height
:
bounding
.
height
,
tip
:
{
color
:
'
green
'
},
xAxis
:
{
label
:
'
x - axis
'
,
scale
:
'
linear
'
,
...
...
@@ -170,11 +185,13 @@ export class Graph2DComponent {
case
'
canvas
'
:
{
var
shapesData
=
JSON
.
parse
(
canvas
.
resultado
);
var
shapesDataNormalized
=
this
.
normalizeShapesData
(
shapesData
);
this
.
instance
=
null
;
let
bounding
=
this
.
getBounding
();
this
.
cleanPlot
();
this
.
instance
=
functionPlot
({
target
:
'
#graph2D-container
'
,
width
:
800
,
height
:
700
,
width
:
bounding
.
width
,
height
:
bounding
.
height
,
grid
:
true
,
xAxis
:
{
label
:
'
x - axis
'
,
scale
:
'
linear
'
,
...
...
@@ -190,7 +207,8 @@ export class Graph2DComponent {
})
break
;
}
case
'
animacion
'
:
{
case
'
animacion
'
:
{
this
.
cleanPlot
();
var
animationData
=
canvas
.
resultado
.
map
(
res
=>
JSON
.
parse
(
res
));
for
(
var
frame
of
animationData
)
{
this
.
animation
.
data
.
push
(
this
.
normalizeShapesData
(
frame
));
...
...
@@ -212,10 +230,12 @@ export class Graph2DComponent {
*/
ngAfterViewInit
()
{
if
(
!
this
.
instance
)
{
let
bounding
=
this
.
getBounding
();
this
.
instance
=
functionPlot
({
target
:
'
#graph2D-container
'
,
width
:
800
,
height
:
700
,
width
:
bounding
.
width
,
height
:
bounding
.
height
,
grid
:
true
,
xAxis
:
{
label
:
'
x - axis
'
,
scale
:
'
linear
'
,
...
...
@@ -239,6 +259,33 @@ export class Graph2DComponent {
}
}
/**
* On Resize Event.
*/
onResize
(
event
){
let
instance
=
this
.
instance
;
let
bounding
=
this
.
getBounding
();
//if (bounding.width > 0) {
console
.
log
(
'
yes
'
);
instance
.
options
.
width
=
bounding
.
width
;
instance
.
options
.
height
=
bounding
.
height
;
instance
.
build
();
//}
}
onClickMe
(
event
)
{
console
.
log
(
'
click
'
);
}
/**
* @name getBounding
* @desc get the measures of the container of the graph
*/
private
getBounding
=
function
()
{
const
{
width
,
height
}
=
this
.
graph2DRef
.
nativeElement
.
getBoundingClientRect
();
return
{
width
,
height
}
}
/**
* @name updateFrame
* @desc update data for Function Plot and redraw the graph
...
...
@@ -248,10 +295,11 @@ export class Graph2DComponent {
this
.
instance
.
options
.
data
=
d
;
this
.
instance
.
draw
();
}
else
{
let
bounding
=
this
.
getBounding
();
this
.
instance
=
functionPlot
({
target
:
'
#graph2D-container
'
,
width
:
800
,
height
:
700
,
width
:
bounding
.
width
,
height
:
bounding
.
height
,
xAxis
:
{
label
:
'
x - axis
'
,
scale
:
'
linear
'
,
...
...
@@ -260,10 +308,7 @@ export class Graph2DComponent {
type
:
'
discrete
'
}
},
data
:
d
,
plugins
:
[
functionPlot
.
plugins
.
zoomBox
()
]
data
:
d
})
}
// Update Frame
...
...
@@ -308,6 +353,40 @@ export class Graph2DComponent {
this
.
instance
.
removeAllGraphs
();
}
/**
* @name increaseSpeed
* @desc Increase Speed Animation
*/
public
increaseSpeed
=
function
()
{
this
.
animation
.
speed
*=
1.5
;
console
.
log
(
this
.
animation
.
speed
);
}
/**
* @name toggleGrid
* @desc Show and Hide Grid
*/
public
toggleGrid
=
function
()
{
//this.instance.toggleGrid();
}
/**
* @name toggleAxis
* @desc Show and Hide Axis
*/
public
toggleAxis
=
function
()
{
//this.instance.toggleAxis();
}
/**
* @name toggleTip
* @desc Show and Hide Tip
*/
public
toggleTip
=
function
()
{
//this.instance.toggleTip();
}
/**
* @name zoomOut
* @desc Zoom Out Button Control
...
...
Frontend Angular 4/src/app/layout/plotter/graph2D/graph2D.helper.ts
View file @
90200d00
...
...
@@ -9,6 +9,12 @@ export interface Animation {
zoo
:
number
,
}
export
interface
Setting
{
axis
:
boolean
,
grid
:
boolean
,
tip
:
boolean
}
export
function
toJSON
(
data
:
string
)
:
string
{
console
.
log
(
'
data
'
,
data
);
const
regexPts
=
/
(?:\"
pts
\"\:\[(?:\((
x
)
,
(
y
)\))
+,
?\])
/g
;
...
...
Frontend Angular 4/src/app/layout/plotter/graph2D/graph2D.module.ts
View file @
90200d00
...
...
@@ -8,7 +8,7 @@ import { Graph2DComponent } from './graph2D.component';
@
NgModule
({
imports
:
[
FormsModule
,
RouterModule
,
CommonModule
,
NgbModule
],
declarations
:
[
Graph2DComponent
],
exports
:
[
Graph2DComponent
]
exports
:
[
Graph2DComponent
]
,
})
export
class
Graph2DModule
{
}
\ No newline at end of file
Frontend Angular 4/src/app/layout/plotter/graph3D/graph3D.module.ts
View file @
90200d00
...
...
@@ -5,15 +5,13 @@ import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import
{
FormsModule
}
from
'
@angular/forms
'
;
import
{
Graph3DComponent
}
from
'
./graph3D.component
'
;
import
{
AnimationControlComponent
}
from
'
../animation-control/animation-control.component
'
;
import
{
ClosePopoverOnOutsideClickDirective
}
from
'
../../../shared/utils/closePopoverDirective
'
;
@
NgModule
({
imports
:
[
FormsModule
,
RouterModule
,
CommonModule
,
NgbModule
],
declarations
:
[
AnimationControlComponent
,
Graph3DComponent
,
ClosePopoverOnOutsideClickDirective
Graph3DComponent
],
entryComponents
:
[
AnimationControlComponent
...
...
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new 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